JQuery Onclick Toggle Class Name
Using jQuery, How Do I Toggle classA to classB on Click Going from: Switch $('. Switch'). On('Click', Function(E){ $('. classA'). removeClass('classA')...
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?
3 Answers
jQuery has a toggleClass function:
<button class="switch">Click me</button>
<div class="text-block collapsed pressed">some text</div>
<script>
$('.switch').on('click', function(e) {
$('.text-block').toggleClass("collapsed pressed"); //you can list several class names
e.preventDefault();
});
</script>
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>
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
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
