jQuery function when one list item has the active class, I want all other list items to automatically not have the active class ?

Question

My webpage is at http://www.sarahjanetrading.com/js/status

All the HTML, CSS and jQuery code + images are available there for anyone to access.

My issue is that currently the jQuery code I have only makes the active states toggle in the list items. What I want is that one list item becomes active(active class) when clicked, all others must have the active class removed.

Thanks

Answer 1

I'm not 100% sure I follow what you want to do, but this code will remove the active class from all other siblings and toggle the current one so there is never more than one item with the active class.

$(function() {
    $('#status li').click(function(){
        var self = $(this);
        self.siblings().removeClass('active');
        self.toggleClass('active');
    });
});

If what you want is that the currently clicked item becomes active and all others become unactive, then you don't want to use toggleClass at all. You can do that more simply with this:

$(function() {
    $('#status li').click(function(){
        var self = $(this);
        self.siblings().removeClass('active');
        self.addClass('active');
    });
});

Answer 2

$(function() {
    var lis = $('#status li');
    lis.click(function() {
        lis.removeClass('active won-active');
        $(this).addClass('active')
    });

    lis.filter('.won').click(function() {
        $(this).toggleClass('won-active')
    });
});

Here is a working jsFiddle: http://jsfiddle.net/thomas_peklak/smMT5/1/

Answer 3

Similar code to jfriend00, just a little cleaner. Assumes that no other code would set more than one active at a time...

$(function() { 
    $('#status li').click(function(){ 
        $(this).siblings().andSelf().toggleClass('active'); 
    }); 
});