How to add and remove classes in a div?

Question

I have some div in a loop and would like to change the classes according to what is clicked on. Please see codes below:

My html:

<div class="Active"></div>
<div class="inactive"></div>
<div class="inactive"></div>

My Jquery:

$(document).ready(function()
{
    $('div.inactive').on('click',function()
    {
        //run some codes
        $(this)
            .removeClass('inactive')
            .addClass('Active')
            .closest('div')
            .find('.Active')
            .removeClass('Active')
            .addClass('inactive');
    });
});

The div with the active class is the current selection that is being displayed. This is not clickable. The div's with the inactive classes are the clickable options. If the user click on an inactive div, the class of that div should change to active (which will be the new selection being displayed) and the previous div with the active class should be changed to inactive making that a clickable options. I did not place the CSS codes because it is irrelevant, all I want is to switch classes depending on the clicked option.

Can someone please take a look at my codes and tell me where I am failing in this?

Answer 1

$(document).ready(function() {
    $(document).on('click', 'div.inactive', function() {
        //run some codes
        $('.Active').removeClass('Active').addClass('inactive');
        $(this).removeClass('inactive').addClass('Active');
    });
});

Here it is: http://jsfiddle.net/ZgYyP/

Answer 2

You are missing . for the class name that is passed to find method, also closest selects the closest parent element, you are removing the Active class from the clicked element too.

$('div.inactive').on('click', function(){
    $(this).removeClass('inactive')
           .addClass('Active')
           .siblings('div')
           .removeClass('Active')
           .addClass('inactive');
    });
});

Note that event handlers are bound to selected elements not their class names, when you change the class name your handler will be executed regardless of the class name of the clicked element. You can use event delegation instead.

$('#aParentElement').on('click', '.Active', function(){
   // Click handler for the Active element
})

$('#aParentElement').on('click', '.inactive', function(){
   // Click handler for the inActive elements
   $(this).removeClass('inactive')
           .addClass('Active')
           .siblings('div')
           .removeClass('Active')
           .addClass('inactive');
})

Answer 3

WORKING DEMO

Other answers have missed this point: "If the user click on an inactive div, the class of that div should change to active and the previous div with the active class should be changed to inactive making that a clickable options "

You are trying to control whether they can be clicked or not by the class name, but the problem is that the elements you bind the click to, div.inactive, don't drop those binds when that class is removed so you must check for this each time they are clicked, and bind the event to the Active ones too.

$('div.inactive, div.Active').on('click',function(){
    if ($(this).hasClass('inactive')){
        //run some codes
        $(this).siblings().andSelf().toggleClass('Active inactive');
    }
});