Question

I have a simple toggle that is working perfectly, manaaged to cobble it together as know little or nothing..

The html..

<ul>
    <li id="menu-item-346" class="parents-toggle"><a href="#">Parent Button</a>

        <ul class="sub-menu">

            <li id="menu-item-347" class="parents-toggle-inner"><a href="#">Child Button</a>

            <ul class="sub-menu">
                <li id="menu-item-348" class="menu-item">Button</a></li>
                <li id="menu-item-349" class="menu-item">Button</a></li>
            </ul>
    </li>
</ul>

The jquery….

 $(".parents-toggle > a").click(function () {
         $(".parents-toggle > ul.sub-menu").not($(this).siblings()).slideUp();
         $(this).siblings(".sub-menu").slideToggle();
      });

      $(".parents-toggle-inner > a").click(function () {
         $(".parents-toggle-inner > ul.sub-menu").not($(this).siblings()).slideUp();
         $(this).siblings(".sub-menu").slideToggle();
      });

Is it possible that when you click on a button to collapse its menu an active class be added to that specific button, so as you click and the menu opens the button remains a different colour…?

Answer 1

Sure, just make use of jQuery’s toggleClass() function like this jsFiddle example.

$(".parents-toggle > a").click(function() {
    $(this).toggleClass('toggled');
    $(".parents-toggle > ul.sub-menu").not($(this).siblings()).slideUp();
    $(this).siblings(".sub-menu").slideToggle();
});

$(".parents-toggle-inner > a").click(function() {
    $(this).toggleClass('toggled');
    $(".parents-toggle-inner > ul.sub-menu").not($(this).siblings()).slideUp();
    $(this).siblings(".sub-menu").slideToggle();
});​

By adding $(this).toggleClass('toggled'); to your functions you can add/remove the class as needed.