'jQuery onclick toggle class name

Using jQuery, how do I toggle classA to classB on click going from:

<a class="switch" href="#">Switch</a>
<div class="classA"></div>


$('.switch').on('click', function(e){
    $('.classA').removeClass('classA').addClass('classB');
    e.preventDefault();
};

How do I toggle the class, instead of just replacing it like I'm doing here?

jquery


Solution 1:[1]

you can use toggleClass() to toggle class it is really handy.

case:1

<div id='mydiv' class="class1"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class2"></div>

case:2

<div id='mydiv' class="class2"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class1"></div>

case:3

<div id='mydiv' class="class1 class2 class3"></div>

$('#mydiv').toggleClass('class1 class2');

output: <div id='mydiv' class="class3"></div>

Solution 2:[2]

It can even be made dependent to another attribute changes. like this:

$('.classA').toggleClass('classB', $('input').prop('disabled'));

In this case, classB are added each time the input is disabled

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arun Pratap Singh
Solution 2 Mahdi Bashirpour

Related Questions