In this tutorial we will see how to Toggle Class OnClick using jQuery. The jQuery toggleClass() Method can be used for this purpose which removes one class and add second class to the selected HTML element.
Table of Contents
HTML Code
HTML Code is given below, This code contains HTML paragraph tag and a button tag.
<p id="text" class="red" >This is main Text.</p>
<button id="btn">Toggle Class</button>
CSS Code
CSS Code is given below, In this code we have defined two CSS classes, we will toggle these two classes using jQuery.
.red
{
color: red;
}
.blue
{
color: blue;
}
JQuery Code
JQuery Code is given below, In this code jQuery toggleClass() Method is used to toggle the class of the HTML element.
This is done on click event, which occurs when the button is clicked.
Take a look at the code given below.
<script>
$('#btn').on('click', function(e)
{
$('#text').toggleClass("red blue");
});
</script>
jQuery toggleClass() Method
jQuery toggleClass() Method toggles between adding and removing one or more classes.
Above code will remove one class and will add the other one on every click of the button.
Demo
Video Tutorial
Watch video tutorial on how to Toggle Class OnClick with jQuery.