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:
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:
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:
After “Add class” button is clicked:
After “Remove class” button is clicked:
Leave a Reply