Here is what I have so far:

Javascript:

$(document).ready(function() {
    $(".thumb_wrapper").click(function() {
        $(this).addClass("active");
    });
});

So this is working, it is adding the class but I want only one item to be active at all times. So when I click on an item, and it turns active, the next item I click on should be the new active one, and remove the class on the previous one.

Does that make sense? How can I do something like this?

Thanks!

Here is what I have so far:

Javascript:

$(document).ready(function() {
    $(".thumb_wrapper").click(function() {
        $(this).addClass("active");
    });
});

So this is working, it is adding the class but I want only one item to be active at all times. So when I click on an item, and it turns active, the next item I click on should be the new active one, and remove the class on the previous one.

Does that make sense? How can I do something like this?

Thanks!

• javascript
• jquery

5 Answers 5

You need to first remove the active class from your thumb_wrapper elements. Try this:

$(".thumb_wrapper").click(function() {
    $(".thumb_wrapper").removeClass("active");
    $(this).addClass("active");
});

Cache your wrapper and call a removeClass() on it first:

var $wrapper = $(".thumb_wrapper");

$wrapper.click(function() {
    $wrapper.removeClass("active");
    $(this).addClass("active");
});

$(".thumb_wrapper").on('click', function() {
    $(".thumb_wrapper").removeClass('active').find(this).addClass("active");
});

This should do it.

$(document).ready(function() {
    $(".thumb_wrapper").click(function() {
        $(this).parent().children().each(function() { 
             $(this).removeClass("active");
         });
         $(this).addClass("active");
     });
});

$(document).ready(function(){
    $('.what').click(function(){
        $('.what').removeClass('active');
        $(this).addClass('active');       
   });       
});

I assume something like this?