jQuery: Toggle other dropdowns when any is toggled

Question

I would like to know how I can make it so that when I have a dropdown opened and I open another one, it will close the one previously opened.

This is what I have so far:

 $(document).ready(function(){ // Hide other drop downs when opening another // $(".hideothers").hide(); // $(".show_hide_account").click(function(){ // $(".slidingDiv_account").slideToggle(); // }); // Account Drop down $(".slidingDiv_account").hide(); $(".show_hide_account").show(); $(".hideothers").hide(); $(".show_hide_account").click(function(){ $(".slidingDiv_account").slideToggle(); }); // Work drop down $(".slidingDiv_work").hide(); $(".show_hide_work").show(); $(".hideothers").hide(); $(".show_hide_work").click(function(){ $(".slidingDiv_work").slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--sidebar start--> <aside> <!-- Start of Toggle --> <div id="sidebar" class="nav-collapse "> <!-- sidebar menu start--> <ul class="sidebar-menu" id="nav-accordion"> <p class="centered"><a href="/user/#"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p> <h5 class="centered">USER</h5> <!-- Account Dropdown --> <li> <a class="show_hide_account"> <i class="fa fa-chevron-down"></i> <span>Account</span> </a> </li> <!-- Toggled Items --> <ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle --> <li> <a href="/account"> <i class="fa fa-pencil"></i> <span>Edit Account</span> </a> </li> <li> <a href="/users"> <i class="fa fa-pencil"></i> <span>Find Users</span> </a> </li> </ul> <!-- end of toggle --> <!-- Work Dropdown --> <li> <a class="show_hide_work"> <i class="fa fa-suitcase"></i> <span>Work</span> </a> </li> <!-- Toggled Items --> <ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle --> <li> <a href="/jobs"> <i class="fa fa-search"></i> <span>Find a Job</span> </a> </li> <li> <a href="/startup"> <i class="fa fa-star"></i> <span>Create a Startup</span> </a> </li> </ul> <!-- end of toggle --> <!-- <li class="mt"> <a href="index.html"> <i class="fa fa-users"></i> <span>Friends</span> </a> </li> --> </ul> <!-- sidebar menu end--> </div> </aside> <!--sidebar end --> 

Refer to the snippet for a clearer idea. Click on account & work to see the dropdowns.

Thank you.

Answer 1

 $(document).ready(function(){ function slideAllUp(obj) { $(".hideothers").each(function(){ if ($(this)[0] != obj[0]) { $(this).slideUp(); //perform on all except self. } }) } // Account Drop down $(".slidingDiv_account").hide(); $(".show_hide_account").show(); $(".hideothers").hide(); $(".show_hide_account").click(function(){ slideAllUp($(".slidingDiv_account")); $(".slidingDiv_account").slideToggle(); }); // Work drop down $(".slidingDiv_work").hide(); $(".show_hide_work").show(); $(".hideothers").hide(); $(".show_hide_work").click(function(){ slideAllUp($(".slidingDiv_work")); $(".slidingDiv_work").slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--sidebar start--> <aside> <!-- Start of Toggle --> <div id="sidebar" class="nav-collapse "> <!-- sidebar menu start--> <ul class="sidebar-menu" id="nav-accordion"> <p class="centered"><a href="/user/#"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></a></p> <h5 class="centered">USER</h5> <!-- Account Dropdown --> <li> <a class="show_hide_account "> <i class="fa fa-chevron-down"></i> <span>Account</span> </a> </li> <!-- Toggled Items --> <ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle --> <li> <a href="/account"> <i class="fa fa-pencil"></i> <span>Edit Account</span> </a> </li> <li> <a href="/users"> <i class="fa fa-pencil"></i> <span>Find Users</span> </a> </li> </ul> <!-- end of toggle --> <!-- Work Dropdown --> <li> <a class="show_hide_work dropdown"> <i class="fa fa-suitcase"></i> <span>Work</span> </a> </li> <!-- Toggled Items --> <ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle --> <li> <a href="/jobs"> <i class="fa fa-search"></i> <span>Find a Job</span> </a> </li> <li> <a href="/startup"> <i class="fa fa-star"></i> <span>Create a Startup</span> </a> </li> </ul> <!-- end of toggle --> <!-- <li class="mt"> <a href="index.html"> <i class="fa fa-users"></i> <span>Friends</span> </a> </li> --> </ul> <!-- sidebar menu end--> </div> </aside> <!--sidebar end --> 

This edit introduces a function called slideAllUp . It passes over all ULs with the class .hideothers . When calling the slideAllUp you need to pass the ul that isn't supposed to go up. This way it closes all others and opens the one clicked upon. The exception is there to allow the menu to close again.