Toggle all link, using jquery

I have the open/close effect happening multiple times here: test site

I need to add a link called "toggle all" belo开发者_如何学Pythonw the page title and when clicked, it will open/close every single sponsorship level. How can I do that?

See working code:

<h3 class="trigger">Presenting Sponsor</h3>
<div class="toggle_container"> content inside toggle_container is hidden/shown when trigger class is clicked</div>



$(document).ready(function(){
    $(".toggle_container").hide();
    $("h3.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("fast");
    return false;
});
});

$("#toggle_button").click(function() {
    $("h3.trigger").toggleClass("active").next().slideToggle("fast");
});

Working example: http://jsfiddle.net/andrewwhitaker/zxvxA/

<a href="#" id="all_toogle">toogle all</a>

$('#all_toggle').click(function(){
    var open = $(this).toogleClass('active').hasClass('active');
    $("h3.trigger").each(function(){
        if( open ){
            $(this).addClass("active").next().stop(true, true).slideDown("fast");
        } else {
            $(this).removeClass("active").next().stop(true, true).slideUp("fast");
        }
    });
});

It takes into account any currently opened or closed sponshorship.

".stop(true, true)" is used to prevent animation "chains" when the toggle is clicked quickly several times.

Also you should use "event.PreventDefault();" instead of "return false;" in your click event functions (you will need to modify the declaration .click(function(event){...).

$(".openAll").click(function(){

    $("h3.trigger").addClass("active").next().slideDown("fast");

});

Maybe

var toggle = true;

var toggleAll = function(){
    $("h3.trigger").removeClass("active");

    if(toggle){
        $("h3.trigger").next().slideDown("fast");
    } else {
        $("h3.trigger").next().slideUp("fast");
    }

    toggle = (!toggle);
};

JQuery supports wildcards when doing matching. So you could do something like this:

$("a[name=showAllLink]").click(function() {
   var linkTxt = $("a[name=showAllLink]").html();
   if (linkTxt.indexOf('Show')>=0) {
      linkTxt = linkTxt.replace(/Show/,"Hide");
      $("div[class*=toggle_container]").show();
   }
   else {
      linkTxt = linkTxt.replace(/Hide/,"Show");
      $("div[class*=toggle_container]").hide();
   }
   $("a[name=showAllLink]").html(linkTxt);
});

Which when the anchor named "showAll" is clicked, will show all of them. The anchor's text will alternate between "Show All" and "Hide All".

<a href="javascript:void(0)" name="showAllLink">Show All</a>