I have a div that starts off on page load hidden. When I toggle the "+" element, the relative div toggles to visible. I am trying to add a class based on is(":hidden") or not with an if - else statement.

My HTML is:

<div class="views-row">
<div class="field-group-format-toggler-abstract">+</div>
<h2>Title 1</h2>
<div class="field-group-format-wrapper" style="display:none;">
Dolor minim neque pala ratis sit. Ideo odio praesent. Aliquam capto gravis quis. Antehabeo diam huic praemitto. Immitto pneum ratis vereor volutpat. Brevitas facilisis illum macto mos plaga ratis utrum. Jumentum rusticus secundum
</div>
</div>

and my JQuery is:

$(".field-group-format-toggler-abstract").click(function() {
$(this).nextAll(".field-group-format-wrapper").toggle();
               });

if($(".field-group-format-wrapper").is(":hidden"))
// this seems to work, 'closed' gets added
$('.field-group-format-toggler-abstract').addClass("closed");

// but this part does not seem to work     
     else
$('.field-group-format-toggler-abstract').addClass("open").removeClass("closed");

​This first part of this works but the add and remove class is not. I have tried variuos ways to do this but nothing seems to work, the class just remains on closed.

Here is a Fiddle

I have a div that starts off on page load hidden. When I toggle the "+" element, the relative div toggles to visible. I am trying to add a class based on is(":hidden") or not with an if - else statement.

My HTML is:

<div class="views-row">
<div class="field-group-format-toggler-abstract">+</div>
<h2>Title 1</h2>
<div class="field-group-format-wrapper" style="display:none;">
Dolor minim neque pala ratis sit. Ideo odio praesent. Aliquam capto gravis quis. Antehabeo diam huic praemitto. Immitto pneum ratis vereor volutpat. Brevitas facilisis illum macto mos plaga ratis utrum. Jumentum rusticus secundum
</div>
</div>

and my JQuery is:

$(".field-group-format-toggler-abstract").click(function() {
$(this).nextAll(".field-group-format-wrapper").toggle();
               });

if($(".field-group-format-wrapper").is(":hidden"))
// this seems to work, 'closed' gets added
$('.field-group-format-toggler-abstract').addClass("closed");

// but this part does not seem to work     
     else
$('.field-group-format-toggler-abstract').addClass("open").removeClass("closed");

​This first part of this works but the add and remove class is not. I have tried variuos ways to do this but nothing seems to work, the class just remains on closed.

Here is a Fiddle

• javascript
• jquery
• toggle
• visibility
• hidden

Share Improve this question Follow asked Aug 6, 2012 at 18:10 Danny EnglanderDanny Englander 2,04455 gold badges2727 silver badges4141 bronze badges 2

• How e you selected the siblings() answer to your earlier question but your implementation here it shows my answer which uses nextAll() ? stackoverflow./questions/11832405/… – Gabe Commented Aug 6, 2012 at 18:18
• @Gabe, please bear with me, I am still experimenting with different implementations of code and what works best. Thanks :) – Danny Englander Commented Aug 6, 2012 at 18:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Try this,

$(".field-group-format-toggler-abstract").click(function() {
    var $div = $(this).nextAll(".field-group-format-wrapper");  // <-- cache the selector
    $div.toggle();       
    $(this).toggleClass('open', $div.is(':visible')); // <-- if wrapper div is visible class open will be added // else it will be removed
    $(this).toggleClass('closed', $div.is(':hidden')); // <-- if wrapper div is hidden class open will be added // else it will be removed
});​

You are able to pass in a condition/switch to as a second argument in .toggleClass()

http://jsfiddle/LHguJ/25/

try this,

if($(".field-group-format-wrapper").is(":visible")){
  $('.field-group-format-toggler-abstract').addClass("close").removeClass("open");
}
else {
    $('.field-group-format-toggler-abstract').addClass("open").removeClass("closed");
}