How can I close one menu when another is opened with Click?

After I've tried most other relevant search results for my problem without anything working I'll try and post my own question instead.

This works like a charm and does so by opening hidden submenus in a websites main menu. Problem is that if I open one of the total of four submenus and then open another the submenus just pile above each other. I'd like only one menu item's submenu to be open at once, meaning that if I open a submenu the previously opened one should close.

jQuery(document).ready(function($) {
  $(".clickSlide > ul").hide();
  $(".clickSlide").click(function() {
    $(this).children("ul").stop(true, true).slideToggle("fast"),
      $(this).toggleClass("dropdown-active");
  });
});

<ul id="menu-sidhuvud-e-butik-vanster" class="menu">
  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 1</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 3</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

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

Any suggestions? I'm pretty novice with JS.

Thanks for any guidance.

Solution 1:

You already have a formula how to do this in your code. All you need ensure is that you toggle .hide() function on every other element that wasn't clicked.

$(this).siblings().children("ul").hide("fast")

The line above does exactly that. It selects all the siblings and hides their children that are ul tags.

jQuery(document).ready(function ($) {
  $(".clickSlide > ul").hide();
  $(".clickSlide").click(function () {
    $(this).siblings().children("ul").hide("fast")
    $(this).children("ul").stop(true, true).slideToggle("fast"),  
    $(this).toggleClass("dropdown-active");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-sidhuvud-e-butik-vanster" class="menu">

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 1</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 3</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

How can I close one menu when another is opened with Click?

Solution 1:

Related

Recent Posts