CODEWITHSUNDEEP
jquery
jnarciso
jnarciso

Reputation: 45

jQuery Toggle divs/add remove class

I have a pretty basic jquery script which uses an h2 as a "trigger" to toggle the div below it.

Seen here:

$(".toggle-container").hide();
$("h2.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false;
});

I've tried to create a "toggle all" link but what happens is the divs that are open or closed aren't being recognized, so it will have the opposite effect. Here is that code:

    $("p.toggle-all a").click(function(){
    $("h2.trigger").toggleClass("active");
    $(".toggle-container").slideToggle("slow");
});

Basically when the p.toggle-all a is clicked, I'd like it to recognize if the toggled divs are closed and if so, open them. Or, if they are open to close them.

Hopefully that makes sense. Any help or advice is greatly appreciated!

Upvotes: 2

Views: 2171

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1075925

My read of your question is that if any of the items is closed, you want the "all" button to open them; and if all are open, you want it to close them. If you really just want to invert their states, hunter has you covered. :-)

But if I've read you right, this should do it:

$("p.toggle-all a").click(function(){
    var divs;

    divs = $("h2.trigger:not(.active)");
    if (divs.length > 0) {
        // Some or all are closed, open them
        divs.click();
    }
    else {
        // All are open, close them
        $("h2.trigger").click();
    }
});

I've used $(this).click(); above for brevity, but I'm not a fan of triggering event handlers from code. I'd rather have a function (say, toggleState) that is called from the click handler and from the code above. But it's a style choice, and certainly if you've hooked up the handler with jQuery, you know you can call click and trigger it.

Upvotes: 0

hunter
hunter

Reputation: 63562

why not let the event already set up do the dirty work and just click() all trigger h2's?

This will Toggle all, meaning if it was open, now it's closed, if closed, now open

$("p.toggle-all a").click(function(){
    $("h2.trigger").each(function() { $(this).click(); });
});

This will close all

$("p.toggle-all a").click(function(){
    $("h2.trigger.active").each(function() { $(this).click(); });
});

This will open all

$("p.toggle-all a").click(function(){
    $("h2.trigger:not(.active)").each(function() { $(this).click(); });
});

Upvotes: 2

Flipke
Flipke

Reputation: 971

You should verify if div is opened or not :

$("p.toggle-all a").click(function(){        
    $.each($("h2.trigger"), function(){
        if($this).is(".active"))
        {
            $(this).next().show("slow");
            $(this).removeClass("active");
        }
        else
        {
            $(this).next().hide("slow");
            $(this).addClass("active");
        }
   });
});

Upvotes: 1

John Hartsock
John Hartsock

Reputation: 86902

$("p.toggle-all a").click(function(){
  var h2Trigger = $("h2.trigger");

  if ($("h2.trigger.active").length != h2Trigger.length) // if all are not active then disable and make all active, else make all active
  {
      h2Trigger.removeClass("active");
  }
  h2Trigger.toggleClass("active");
  $(".toggle-container").slideToggle("slow");
});

Upvotes: 0

Related Questions