jQuery - toggle & removeClass

Question

An easy one, but I can't figure it out. I have a link called #title and when you click it it toggles div called #content. This works perfectly, but in addition I'm adding "active" class to my #title link and I can't get rid of it, even with removeClass.

See code above and example link (the title should be red ONLY when the #content is expanded, not all the time).

$('#title').click(function() {
    $(this).addClass('active');
    $('#content').toggle();
}), function() { 
    $(this).removeClass('active');
};

http://jsfiddle.net/vY3WY/

Sardinia

Answer 1

You can use the toggleClass function along with toggle.

http://jsfiddle.net/vY3WY/1/

$('#title').click(function() {
    $(this).toggleClass('active');
    $('#content').toggle();
});

Or you can use a more robust version which will ensure that the class is added if the content is visible and removed otherwise.

http://jsfiddle.net/vY3WY/6/

$('#title').click(function() {
    $('#content').toggle();
    if ($('#content:visible').size() != 0)
    {
         $(this).addClass('active');   
    }
    else
    {
         $(this).removeClass('active');   
    }
});

Stonemason

+1 for the 1st version, I guess it is enough for this problem – Malefactor

The first example, just WOW, two lines. Awesome! – Sardinia

Answer 2

This version works.

$('#title').click(function() {
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
    $('#content').toggle();
});

Check for the presence of 'active' using hasClass and remove it if it is there. Add it if it is not.

Or you could use toggleClass to hide all that logic.

Annotation

You should probably post the solution here and not just a link, for future viewers of this question if the jsfiddle perishes. :) – Stonemason

Answer 3

A compact and still readable (I guess) solution:

$('#title').click(function() {
    var isContentVisible=$('#content').toggle().is(':visible');
    $(this).toggleClass('active', isContentVisible);
});

Live Demo

It toggles #content and checks whether it is visible or not afterwards. Then it toggles the class on #title based on the result. Could be a one-liner function also, but it would not satisfy my readability expectations then.

Malefactor

+1 - Nice compact solution. I forgot about the switch on toggleClass. – Stonemason

Answer 4

one more Solution for hide current value with other value

$('.my').click(function() {
if($(this).hasClass('active')) {
    $(this).removeClass('active');
} else {
    $(this).addClass('active');
}
$('.my').toggle();

});

Click here! This works with reference links as well.

Cowley

Answer 5

I think that this is the most appropriate way to do it.

$(this).toggleClass('active').siblings().removeClass('active');

Breedlove