Jquery toggle question

Question

Hi Guys,

If I Click on the current item it should toggle on and off and close all other item if it is open. When I click on menu1 it just keeps open.. i want to features like when it is open it should close, when it it closed it should open. Please see the url

http://207.210.64.138/~paglaso/jquery/toggle.php

<script language="javascript" type="text/javascript">
    $(document).ready(function(){

        $(".toggle_container").hide();

        $("li.trigger").click(function(){

             $(".toggle_container").hide();
             $(this).next(".toggle_container").slideToggle("slow,");
          $("li.trigger").removeClass("active");
          $(this).addClass("active");
          return false;
        });

    });
</script>

<ul>
  <li class="trigger" id="t1">Menu 1</li>
  <li class="toggle_container">Menu 1 content</li>
  <li class="trigger" id="t2">Menu2</li>
  <li class="toggle_container">Menu2 content</li>
  <li class="trigger" id="t3">Menu3</li>
  <li class="toggle_container">Menu3 content</li>
</ul>

Answer 1

I'm not sure what your question is, but I do see an extra comma at the end of the third line of your code (...slideToggle("slow,")). That should probably not be there.

EDIT: After checking the provided url I now see what the problem is. First you should add a new style for the .toggle_container class:

li.toggle_container { display: none; }

This prevents initial display of the sub menus. Next you should take into account inside your jQuery script if you click on an active or inactive link:

$(document).ready(function() {
    $("li.trigger").click(function() {
        $(this).next(".toggle_container").slideToggle("slow");
        if (!$(this).hasClass("active")) {
            $(".toggle_container").hide();
            $(".active").toggleClass("active");
            $(this).toggleClass("active");
        }
        return false;
    });
});

And that's it.

Answer 2

Try these on your code,

$("selector").addClass("class").siblings().removeClass("class");
or
$("selector").slideToggle("slow").siblings().hide("slow");

Answer 3

You can just extend jQuery with a toggleClass as shown below:

//extend jquery
(function($) {
    $.fn.toggleClass = function(check, replace) {
        return this.each(function() {
            if ($(this).hasClass(check)) {
                $(this).removeClass(check);
                $(this).addClass(replace);
            } else {
                if ($(this).hasClass(replace))
                    $(this).removeClass(replace);
                $(this).addClass(check);
            }
        });
    };
})(jQuery);

So you can do stuff like this:

<input type="button" value="Toggle" 
onclick="$('#myDiv').toggleClass('expanded','collapsed')"/>

Answer 4

Here's a bit simpler solution overall:

$(function(){
  $(".toggle_container").hide();
  $("li.trigger").click(function(){
     $(".toggle_container").not($(this).next()).hide();
     $(this).addClass("active").next(".toggle_container").slideToggle("slow")
            .end().siblings().removeClass("active");
  });
});

Note though, the only thing needed to fix your original code, is to exclude the element you want from being hidden so the toggle works correctly (it was being hidden always before toggle, so toggle was always "show"), you do this by adding .not() like this:

$(".toggle_container").hide();
$(".toggle_container").not($(this).next()).hide();