jQuery toggleClass() Method

Quiz

The toggleClass() method in jQuery toggles between adding and removing specified class names from selected elements.

It evaluates each element for the presence of the specified class names. If absent, it adds them; if already present, it removes them, thus creating a toggle effect.

Using the "switch" parameter of this method, we can specify whether to remove or add a class name.

Syntax

Following is the syntax of toggleClass() method in jQuery −

$(selector).toggleClass(classname,function(index,currentclass),switch)

Parameters

This method accepts the following parameters −

classname: It specifies one or more class names to toggle. If we want to specify multiple class names, we need to seperate the class names with spaces.
function(index,currentclass): (Optional) A function that returns one or more class names to be toggled based on the index position of the element and the current class name(s).
switch: (Optional) A boolean value indicating whether to add or remove the class.
If set to true, the class will be added if it's not present and removed if it's present.
If set to false, the class will be removed.

Example 1

In the following example, we are using the toggleClass() method to toggle between adding and removing the "highlight" class name for the <div> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").toggleClass("highlight");
  });
});
</script>
<style>
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>
<div>Click the button to toggle the class</div>
<button>Toggle Class</button>
</body>
</html>

Execute the program and click the button more than once to see the toggle effect on the <div> element.

Example 2

In this example, we are using the toggleClass() method to toggle between adding and removing a class name −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").toggleClass("highlight");
  });
});
</script>
<style>
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>
<div>div element 1.</div>
<div class="highlight">div element 2.</div>
<button>Toggle Class</button>
</body>
</html>

Click the button more than once to see the toggle effect on both the <div> elements.

Example 3

This example toggles between three classes ("highlight", "italic", "underline") on paragraphs when the button is clicked, using the current class to determine the next class to apply −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass(function(index, currentClass) {
      if (currentClass === "highlight") {
        return "italic";
      } else if (currentClass === "italic") {
        return "underline";
      } else {
        return "highlight";
      }
    });
  });
});
</script>
<style>
.highlight {
  color: red;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration: underline;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is one more paragraph.</p>
<button>Toggle Class</button>
</body>
</html>

Execute the program and click the button more than once to see the toggle effect.

Example 4

In this example, we are toggling class with "switch" parameter of toggleClass() method −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $(".add").click(function(){
      $("div").toggleClass("highlight",true);
    });
    $(".remove").click(function(){
      $("div").toggleClass("highlight",false);
    });
  });
</script>
<style>
.highlight {
  background-color: yellow;
}
</style>
</head>
<body>
<div>Div element 1.</div>
<div class="highlight">Div element 2.</div>
<button class="add">Add "highlight" class</button>
<button class="remove">Remove "highlight" class</button>
</body>
</html>

Execute the program and click the buttons to see the toggle effect.

jquery_ref_html.htm

Print Page