The jQuery toggleClass() method can be used to toggle the class names for the selected element. You can also add the class and toggle using the method.
It first checks the element whether the specified class exists or not. If the class is already present, it removes the class. Otherwise, it adds the class if not present in the selected element.
Syntax of toggleClass() Method
The syntax of this method is given below:-
Description of the Parameters
The description of the parameters are given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the selector to select the elements and toggle the class names. Use the tag name, class name, or id of the elements to select. |
| className | It is the name of the class to toggle for the selected element. You can add only a single class name to toggle. |
| switch | Specify the boolean value as true or false. The boolean true is used to add the class and false value to remove the class. |
| index | It returns the index position of the selected element. |
| current_class | It returns the current class name of the selected element. |
Toggle Class using jQuery toggleClass() Method
The method can be used without specifying the class names to add or remove. It toggles the class names already present in the selected element. If the selected element has a single class, you can use this method to toggle the class names.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('.mytogglebtn').click(function(){ $("p").toggleClass("mytogglepara"); }); }); </script> <style> .mytogglepara{ padding:10px; border:1px solid #ccc; } </style> <button type="button" class="mytogglebtn">Click to Toggle Class</button><br><br> <p class="mytogglepara">This is my paragraph</p> |
Output
This is my paragraph
When you click the button given above, it toggles the class names. Click the button given above for more than one time to see the toggle effect.
Add Class and Toggle After Adding to the Element
You can also use the jQuery toggleClass() method to add the class name and toggle. It first adds the specified class to the selected element. After that, it toggles the class names for the selected element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function(){ $('.addtoggleclassbtn').click(function(){ $("p").toggleClass("addtoggleapara"); }); }); </script> <style> .addtoggleapara{ padding:10px; border:1px solid #ccc; color:red; } </style> <button type="button" class="addtoggleclassbtn">Click to Add Class and Toggle</button><br><br> <p>This is my paragraph</p> |
Output
This is my paragraph
When you first click the button given above, it adds the class names to the selected element. Click the above button for more than one time to see the toggle effect.
Either Add or Remove Class Using Toggle with Switch
In addition to all the above, you can also use the toggleclass method to only add or remove the class names. For this, you have to use the method with the boolean value true and false. The true value adds the class and not remove the class. While the false value removes the class and not add the class names.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> $(document).ready(function(){ $('.addtoggleswitchbtn').click(function(){ $("p").toggleClass("toggleswitchpara", true); }); $('.removetoggleswitchbtn').click(function(){ $("p").toggleClass("toggleswitchpara", false); }); }); </script> <style> .toggleswitchpara{ padding:10px; border:1px solid #ccc; color:red; background:yellow; } </style> <button type="button" class="addtoggleswitchbtn">Click to Add Class</button> <button type="button" class="removetoggleswitchbtn">Click to Remove Class and Toggle</button><br><br> <p>This is my paragraph</p> |
Output
This is my paragraph
You have to click both the button to add or remove the class name from the selected element. It’s also useful when you want to only add or remove the class names.
You may also like to read
I hope you like this tutorial on jQuery toggleClass() method. If you have any queries regarding the tutorial, please comment below.
References