Reputation: 45
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
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
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
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
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