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');
    });
});