How can I slideToggle close other menus when current menu is open?

February 27, 2023

I need some help with this navigation functionality.

When a user clicks on a Menu item how can I close the other menus if they are open? Also, the active class needs to be disabled as well for the closed menus.

I have this navigation working how I want just except for this piece.

Any help is gladly appreciated.

Thanks!

$(document).ready(function() {

  $('.navigationV1 ul.top-level-menu .label').on('click', function() {
    // Toggle top nav links
    $(this).siblings('.drop-down-menu').slideToggle();
    $(this).toggleClass('active');
  });

});

.active {
  background-color: #666;
}

.drop-down-menu {
  display: none;
}

<div class="navigationV1 top-level-menu label">

  <div class="descendant-links-container">
    <ul class="top-level-menu">

      <li>
        <a class="label">Menu 1</a>

        <ul class="drop-down-menu">
          <li>
            <a>Drop-down-menu 1</a>
          </li>
        </ul>
      </li>

      <li>
        <a class="label">Menu 2</a>
      </li>

      <li>
        <a class="label">Menu 3</a>
        <ul class="drop-down-menu">
          <li>
            <a>Drop-down-menu 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

>Solution :

First, you need to find all open menus and close them and next open the new menu:

$(document).ready(function() {

    $('.navigationV1 ul.top-level-menu .label').on('click', function() {
        // Close already opened menus
        $('.label.active').removeClass('active').siblings('.drop-down-menu').slideUp();
        // Toggle top nav links
        $(this).siblings('.drop-down-menu').slideToggle();
        $(this).toggleClass('active');
    });

});