Toggle Class OnClick using jQuery

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
• CSS Code
• JQuery Code
• jQuery toggleClass() Method
• Demo
• Video Tutorial
• More JQuery Tutorials

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

Check Demo

Video Tutorial

Watch video tutorial on how to Toggle Class OnClick with jQuery.