Toggle Multiple Drop Down Menus in jQuery

Question

I've got a set of menus that I would like to toggle on/off when a user clicks on an option bar (similar to the bar in Gmail which you move/label emails).

When a user clicks a button, the menu appears. When the user clicks another button, the previous menu disappears and the new one appears. This is working with the following code. However, what isn't working is if the user clicks a button, then clicks the same button, the menu is not disappearing.

I understand why it's not working, but not sure how to fix it. I think I need to add "if the open menu is the one you are clicking on, close it and dont open anything else." But the if statements i've tried aren't doing this.

$("#moving ul li").click(function() {
    // If the button clicked has the "active" class (meaning the menu is already open)
    if ($("#moving ul li.active") == this) {
        // Close the menu (removing the visible class) and make the button no longer active
        $(this).toggleClass("active")
        $(this).children("ul").toggleClass("visible")
    // Otherwise ...
    } else {
        // Find the open one and close it
        $("#moving ul li.active").toggleClass("active")
        $("#moving ul li ul.visible").toggleClass("visible")
        // Open this menu
        $(this).toggleClass("active")
        $(this).children("ul").toggleClass("visible")
    }
})

Answer 1

It's not working because your if statement will never match.

"this" isn't a jQuery object, it's the actual DOM node. The statement should be:

if($(this).hasClass('active')){

Answer 2

try this

html

<ul class="nav">
    <li>
       <a href="#">Main 1</a>
       <a class='trigger'><div></div></a>
       <ul>
          <li>
             <a href="#">sub1</a>
             <a class='trigger'><div></div></a>
              <ul>
                  <li>
                         <a href="#">subsub1</a>
                  </li>
               </ul>
           </li>
       </ul>
    </li>

</ul>

css code

<style>
.nav li{list-style:none;display:block}
.nav > li ul{display:none}
.nav a.trigger{display:block;float:right;margin-                      right:2px;width:20px;height:20px}
.nav a.minus > div{background:url(minus.png);}
.nav a.plus > div{background:url(plus.png);}
</style>

Jquery Code

$(".nav a.trigger").addClass("plus");
$(".nav a.trigger").click(function(){ 
    var ul = $(this).parent().children("ul");
    if($(this).siblings('ul').is(":hidden")){
        $(this).siblings('ul').slideDown();
        $(this).addClass("minus");
        $(this).removeClass("plus");
    }else{
        $(this).siblings('ul').slideUp();
        $(this).addClass("plus");
        $(this).removeClass("minus");
    }
         $(this).parent().siblings('li').find("ul:visible").slideUp().siblings('a.trigger').addClass("plus");
      $(this).parent().siblings('li').find("ul:visible").slideUp().siblings('a.trigger').addClass("minus");
    $(this).siblings('ul').find("ul:visible").slideUp().siblings('a.trigger').addClass("plus");
    $(this).siblings('ul').find("ul:visible").slideUp().siblings('a.trigger').removeClass("minus");
});

Answer 3

Hey Brenden, I got a nice solution for you :) Your problem is little bit tricky...

// JS - jQuery
$(function () {

    $("#moving .list h1").click(function() { // only recognize the click on headlines in lists

        $(this).next().toggle(); // get the ul and toggle

        if($('.list ul:visible').length > 1) { // reset all if there is more than one opened
            $('.list ul:visible').hide(); // hide all
            $(this).next().show(); // now show only the list you want
        }
    }); 
});

// HTML
<div id="moving">
    <div class="list">
        <h1>Hi im first</h1>
        <ul>
            <li>Foo1</li>
            <li>Bar1</li>
        </ul>
    </div>
    <div class="list">
        <h1>Hi im second</h1>
        <ul>
            <li>Foo2</li>
            <li>Bar2</li>
        </ul>
    </div>
</div>

This would be my solution for your problem. Its a little bit different, because its not a good practise to use Unordered Lists ( <ul> ) in a List Item ( <li> ). So I gave every element an Headline ( <h1> ) and a container ( <div id="list"> ).

Hope that could help you to solve problems in future.

If you have any question ask in comment :)

http://jsfiddle.net/jjyss/ <- Thats an Live Demo for you