Question

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

Answer 1

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.net/LHguJ/25/