jQuery double dropdown Navigation Issue

Question

I have created a jQuery drop down navigation for a wordpress multisite, the navigation is working great but once a drop down has happened once, and a user clicks on another dropdown link in the navigation, the existing drop down is still showing like so: Double Drop Down Occurence

I'd like to remove the drop down from appearing twice when another item in the navigation is clicked, so that only one is showing at a time like so:

Single dropdown

Here is the code forming the navigation:

<script>
jQuery(document).ready(function( $ ) {

jQuery( ".divisionslink" ).click(function() {
jQuery( ".divisions-submenu" ).toggleClass( "heightnav" );
});	
jQuery( ".aboutlink" ).click(function() {
jQuery( ".about-submenu" ).toggleClass( "heightnav" );
});
jQuery( ".productlinks" ).click(function() {
jQuery( ".products-submenu" ).toggleClass( "heightnav" );
});
jQuery( ".serviceslink" ).click(function() {
jQuery( ".services-submenu" ).toggleClass( "heightnav" );
});

});
</script>
<!-- Dropdown Script -->

.navigation-desktop--submenu {
    // border-bottom: 2px solid $color-dufaylite;
    &.heightnav {
        height: 0;
        @include single-transition(all, 0.5s);
    }
    display: none;
    @include contrasted($color-grey-medium, $color-navy-light, $color-navy-dark);
    overflow: auto;
    @media #{$medium-up} {
        display: flex;
        height: 3rem;
        @include single-transition(all, 0.5s);
    }
    align-items: center;
    justify-content: space-between;
    font-weight: 300;
    ul {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 0;
        li {
            display: flex;
            button {
                background-color: inherit;
                color: inherit;
                border-radius: 0;
            }
            a, button {
                font-size: 14px;
                text-decoration: none;
                padding: 0.50rem;
                color: $color-navy-light;
                @include single-transition(color, 0.125s);
                &:hover, &:focus {
                    color: white;
                    @include single-transition(color, 0.125s);
                }
            }
        }
        &.navigation {
            li {
                border-left: 1px solid;
            }
        }
    }
}

<!-- Main Navigation Link -->
<li class="divisionslink"><a href="#">Divisions<img style="padding-left: 5px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/navigation/icon-dropdown.png" /></a></li>

<li class="aboutlink"><a href="#">About<img src="<?php echo get_template_directory_uri(); ?>/images/icons/navigation/icon-dropdown.png" /></a></li>
					
<!-- Dropdown Submenu -->
<section class="about-submenu navigation-desktop--submenu heightnav">
	<div class="row submenu">
		<div class="small-12 columns">
			<nav class="desktop-submenu desktop-submenu--product">
				<ul>
					<?php if(get_page_by_title('About')) : ?>
					<li><a href="<?php echo get_permalink( get_page_by_title( 'About' ) ) ?>">Overview</a></li>
					<?php endif;?>
					<?php if ($currentblogname === 'dufaylite') : ?>
					<li><a href="<?php echo network_site_url(); ?>history-of-honeycomb/">History of Honeycomb</a></li>
					<li><a href="<?php echo network_site_url(); ?>our-people/">Our People</a></li>
					<li><a href="<?php echo network_site_url(); ?>testimonials/">Testimonials</a></li>
					<li><a href="<?php echo network_site_url(); ?>careers/">Careers</a></li>
					<?php elseif ($currentblogname === 'clayboard') : ?>
					<li><a href="<?php echo get_permalink( get_page_by_title( 'Company History' ) ) ?>">Company History</a></li>
					<li><a href="<?php echo get_permalink( get_page_by_title( 'Testimonials' ) ) ?>">Testimonials</a></li>
					<?php elseif ($currentblogname === 'envirolite') : ?>
					<li><a href="<?php echo get_permalink( get_page_by_title( 'Our Story' ) ) ?>">Our Story</a></li>
					<li><a href="<?php echo get_permalink( get_page_by_title( 'Testimonials' ) ) ?>">Testimonials</a></li>
					<?php elseif ($currentblogname === 'ultraboard') : ?>
					<!-- <li><a href="<?php echo get_permalink( get_page_by_title( 'Our People' ) ) ?>">Our People</a></li> -->
					<li><a href="<?php echo get_permalink( get_page_by_title( 'Testimonials' ) ) ?>">Testimonials</a></li>
				</ul>
				<?php else : ?>
				<?php endif; ?>
			</nav>
		</div>
	</div>
</section>

The aim is to remove the class from the previous item when another item is clicked and the submenu drops down, to avoid this double issue occuring, can anyone please advise?

Thanks,

Answer 1

You need to remove the class .heightnav from all other elements upon click of any menu item, then apply the class to the clicked menu item.

jQuery( ".divisionslink" ).click(function() {
      jQuery( "section.navigation-desktop--submenu.heightnav" ).removeClass( "heightnav" );
      jQuery( ".divisions-submenu" ).toggleClass( "heightnav" );
}); 

This is assuming that every dropdown submenu <section> has the class .navigation-desktop--submenu