jQuery toggleClass() with Examples

The toggleClass() method in jQuery is used to toggle between adding or removing one or more classes from selected elements.


The syntax is as follows −


Above, class name specifies one or more class names to add or remove, whereas func is a function that returns one or more class names to add or remove.


Let us now see an example to implement the jQuery toggleClass() method 

 Live Demo

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
.demo {
   background-color: orange;
   color: white;
   border: 1px solid blue;
<h2>Exam Info</h2>
<p>Examination begins on 24th December. The students are requested to submit project report before 15th December.</p>


This will produce the following output −

On clicking Toggle, the appearance of the above text will change −

On clicking Toggle again, the appearance gets back to the initial stage −