Dropdown menu - only one opened menu at time

Question

I have this function for a multiple dropdown menu:

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
    $(this).parent(".sub-menu").children("ul").slideToggle("100");
    $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});

It works: the dropdown menu actually drops and that's fine, I just would like it to close/hide automatically when the user click on the next menu... I'd like to have only a dropdown menu opened at time, otherwise the menu itself will be too tall!

This is the code I'm working on: https://codepen.io/amsteldroid/pen/NoBYye

As you can see all the dropdown menu stay opened, I'd like to have only one opened at time.

$('.sub-menu ul').hide();
$(".sub-menu a").click(function() {
  $(this).parent(".sub-menu").children("ul").slideToggle("100");
  $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});

body {
  background-color: #fff;
  font-size: 14px;
}

nav {
  position: relative;
  margin: 50px;
  width: 360px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  /* Sub Menu */
}

nav ul li a {
  display: block;
  background: #ebebeb;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
}

nav ul li a:hover {
  background: #f8f8f8;
  color: #515151;
}

nav ul li a .fa {
  width: 16px;
  text-align: center;
  margin-right: 5px;
  float: right;
}

nav ul ul {
  background-color: #ebebeb;
}

nav ul li ul li a {
  background: #f8f8f8;
  border-left: 4px solid transparent;
  padding: 10px 20px;
}

nav ul li ul li a:hover {
  background: #ebebeb;
  border-left: 4px solid #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class='animated bounceInDown'>
  <ul>
    <li><a href='#profile'>Profile</a></li>
    <li><a href='#message'>Messages</a></li>
    <li class='sub-menu'><a href='#settings'>Settings<div class='fa fa-caret-down right'></div></a>
      <ul>
        <li><a href='#settings'>Account</a></li>
        <li><a href='#settings'>Profile</a></li>
        <li><a href='#settings'>Secruity &amp; Privacy</a></li>
        <li><a href='#settings'>Password</a></li>
        <li><a href='#settings'>Notification</a></li>
      </ul>
    </li>
    <li class='sub-menu'><a href='#message'>Help<div class='fa fa-caret-down right'></div></a>
      <ul>
        <li><a href='#settings'>FAQ's</a></li>
        <li><a href='#settings'>Submit a Ticket</a></li>
        <li><a href='#settings'>Network Status</a></li>
      </ul>
    </li>
    <li><a href='#message'>Logout</a></li>
  </ul>
</nav>

Please click edit, then [<>] snippet editor and provide us with a minimal reproducible example — mplungjan
You have a very specific code with own logic and class, so I'm not able to share with you the working code. But idea behind that you need to do is to hide all menus before you open a new one. So I assume you need to run $('.sub-menu ul').hide(); in your .click() function at the beginning. — Dmytro Huz
@mplungjan I've post the entire code because I'm the worst when it comes to explain something... I'm really sorry! — Lee Scott

mplungjan mplungjan · Accepted Answer · 2020-04-16T12:13:38

It was not trivial, and impossible until you posted the HTML

I changed the div to a span

I had to move the open/close outside the complete of the "other" closing since it of course would toggle current element for each other that was closed

$('.sub-menu ul').hide();
$(".sub-menu a").click(function(e) {
  e.stopPropagation()
  const $parentLI = $(this).closest("li");
  const $other = $parentLI.siblings();
  const $myUL = $parentLI.find("ul");
  const $myToggle = $(this).find(".right");
  $other
    .find("ul").slideUp("100")
    .find("a span").removeClass("fa-caret-up").addClass("fa-caret-down");
  $myUL.slideToggle("100");
  $myToggle.toggleClass("fa-caret-up fa-caret-down");

});

body {
  background-color: #fff;
  font-size: 14px;
}

nav {
  position: relative;
  margin: 50px;
  width: 360px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  /* Sub Menu */
}

nav ul li a {
  display: block;
  background: #ebebeb;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s linear;
}

nav ul li a:hover {
  background: #f8f8f8;
  color: #515151;
}

nav ul li a .fa {
  width: 16px;
  text-align: center;
  margin-right: 5px;
  float: right;
}

nav ul ul {
  background-color: #ebebeb;
}

nav ul li ul li a {
  background: #f8f8f8;
  border-left: 4px solid transparent;
  padding: 10px 20px;
}

nav ul li ul li a:hover {
  background: #ebebeb;
  border-left: 4px solid #3498db;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<nav class='animated bounceInDown'>
  <ul>
    <li><a href='#profile'>Profile</a></li>
    <li class='sub-menu'><a href='#settings'>Messages<span class='fa fa-caret-down right'></span></a>
      <ul>
        <li><a href='#settings'>Message 1</a></li>
        <li><a href='#settings'>Message 2</a></li>
        <li><a href='#settings'>Message 3</a></li>
      </ul>
    </li>
    <li class='sub-menu'><a href='#settings'>Settings<span class='fa fa-caret-down right'></span></a>
      <ul>
        <li><a href='#settings'>Account</a></li>
        <li><a href='#settings'>Profile</a></li>
        <li><a href='#settings'>Secruity &amp; Privacy</a></li>
        <li><a href='#settings'>Password</a></li>
        <li><a href='#settings'>Notification</a></li>
      </ul>
    </li>
    <li class='sub-menu'><a href='#message'>Help<span class='fa fa-caret-down right'></span></a>
      <ul>
        <li><a href='#settings'>FAQ's</a></li>
        <li><a href='#settings'>Submit a Ticket</a></li>
        <li><a href='#settings'>Network Status</a></li>
      </ul>
    </li>
    <li><a href='#message'>Logout</a></li>
  </ul>
</nav>

Dropdown menu - only one opened menu at time

1 Answers