jQuery toggleClass() Method

The jQuery toggleClass() method alternates between adding and removing specified classes from selected elements. For example, if a paragraph (p element) has class “highlight” then using toggleClass(“highlight”) method on p elements will remove the “highlight” class and again using the toggleClass(“highlight”) will add the class again and so on.

This works like an on/off switch, if element doesn’t have a class, it adds the specified class, if element has the class, it removes the class.

Syntax of toggleClass() method

$(selector).toggleClass(classname1 classname2 .., Switch)

$(selector): It selects the elements. Read more about jQuery selectors here.

classname1, classname2 and so on: These are the classes that needs to be toggled for the selected elements. To specify more than one class in the toggleClass() method, use space between class names.

Switch: This is an optional parameter. It is a boolean value where true represents the addition of the class and false represents the removal of class. Refer the third example to understand this switch parameter concept.

Example 1: jQuery toggleClass() Method

In this example, first paragraph has no class assigned and the second paragraph has a class “highlight” assigned to it. Inside toggleClass() method, we are applying the toggleClass("highlight") on “p” elements.

When the button is clicked, it toggles the class “highlight” for all p elements, which means it assigns the class to first paragraph as it has no class and removes the class from second paragraph as it has the “highlight” class.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("highlight");
  });
});
</script>
<style>
.highlight {
  font-size: 150%;
  color: green;
}
</style>
</head>
<body>
<h1>jQuery toggleClass() example on BeginnersBook.com</h1>
<p>This is the first paragraph.</p>
<p class="highlight">This is the second paragraph.</p>

<button>Toggle the "highlight" class for paragraphs</button>

</body>
</html>

Before toggle button click:
jQuery toggleClass() Method
After toggle button click:

Example 2: Toggle class using a function

This example demonstrates how to toggle class of selected elements using a function.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("li").toggleClass(function(n){
      return "listItem" + n;
    });
  });
});
</script>
<style>
.listItem0, .listItem1{
  color: green;
}

.listItem2, .listItem3 {
  color: blue;
}
</style>
</head>
<body>
<h1>BeginnersBook.com Example: jQuery toggleClass() using a function</h1>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Mango</li>
</ul>
<button>Toggle class for list items</button>
</body>
</html>

Before toggle button click:
jQuery toggleClass() using a function
After toggle button click:

Example 3: Toggle class using switch parameter

In the above examples, we have seen how toggleClass() toggles between add and remove class. However there is a optional parameters switch that can be used to specify whether to add class or remove class.

For example:
$(“p”).toggleClass(“highlight”, true): It will add highlight class to paragraphs on button click but will not remove the class for further button clicks.
Similarly $(“p”).toggleClass(“highlight”, false): will remove the highlight class but will not re-add the class on further button clicks.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#add").click(function(){
    $("p").toggleClass("highlight",true);
  });
  $("#remove").click(function(){
    $("p").toggleClass("highlight",false);
  });
});
</script>
<style>
.highlight {
  font-size: 150%;
  color: green;
}
</style>
</head>
<body>
<p><b>Example on BeginnersBook.com: jQuery toggleClass() using switch</b></p>
<p>This is the first paragraph.</p>
<p class="highlight">This is the second paragraph.</p>

<button id="add">Add class</button>
<button id="remove">Remove class</button>

</body>
</html>

When the page loads and no button is clicked:
Toggle class using switch parameter
After “Add class” button is clicked:

After “Remove class” button is clicked: