jQuery toggleClass
How to use toggleClass method
The toggleClass method is used to add or remove class(es) in the specified HTML elements.
If the class is already applied, it will be removed at first action.
If a class does not exist in that element, then the specified class will be added.
Syntax of jQuery toggleClass
Following is the syntax to use toggleClass method:
To toggle multiple classes, separate class names by space:
See the following online examples to learn more about the toggleClass method.
An example to explain toggleClass in div element
In this example, a div is created with a class which is applied as web page loads. As you click the button “Execute toggleClass”, another class with different CSS properties will be added in that div.
If you click the button again, this class will be removed and div will be back to its initial settings. See this online:
See online demo and code
Initially, the div was created with this class:
|
1 |
<div class="divcls">Click the button to execute toggleClass method</div> |
The divcls contains only the background and width properties:
|
1 2 3 4 5 6 7 8 9 |
.divcls { background: #4F6677; width:220px; } |
At the click event of button, following jQuery code executed with toggleClass method:
|
1 2 3 4 5 |
$(".btncls").click(function(){ $("div.divcls").toggleClass("divcls2"); }); |
As you click the button repeatedly, divcls2 will be added and removed in the specified div. Following CSS properties are applied with divcls2:
|
1 2 3 4 5 6 7 8 9 10 11 |
.divcls2 { border-radius: 15px; padding:20px; font-size:22px; color:#fff; } |
An example of toggleClass with HTML table
Generally, you may want to use the toggleClass method to allow visitors to change the look of specific sections of a web page and revert it back to original upon selection by the user. Or, you may want to change the look of a section to “disable” and turn it back to “active’ by using the toggleClass.
In this demo, as you click the button, the HTML table class will be added or removed by using the toggleClass method. See the demo online:
See online demo and code
Again, in this demo the table was given an initial class (activetbl) as web page loaded. As you click the button, another class is added (at you click first time) that given it a disabled look. This was done at the click event of button by using the jQuery toggleClass method:
|
1 2 3 4 5 |
$(".btncls").click(function(){ $("#tbl").toggleClass("tbldisable"); }); |
If you click the button again, this class (tbldisable) will be removed from the table and it will revert back to its original look with activetbl class only.
In this example, I have created three rows of different sized Bootstrap buttons by using the Bootstrap framework. The buttons are created by using main btn class along with btn-xs, btn-sm and normal sized buttons. All these are Bootstrap built-in classes.
Below these buttons, a large button is displayed to “enable/disable” that button groups. If you click the button first time, the buttons will be “disabled”. Clicking it again will enable the buttons.
See online demo and code
Note that, the buttons look is disabled only, otherwise functionally you may still select the buttons. To actually make it unelectable use jQuery/JavaScript code accordingly.
In the script section, only this line of code is executed at the click event of button:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> $(document).ready(function(){ $("#btncls").click(function(){ $(".btn").toggleClass("btndisable"); }); }); </script> |
While the btndisable class contains the following CSS properties:
|
1 2 3 4 5 6 7 8 9 10 11 |
.btndisable{ border: 1px dotted black; color: #C9C9C9; background-color:#eee; } |
Upon clicking the button, the toggleClass method will add the above class in buttons that only using the border and background-color properties to change the look.
If you click the button again, this class will be removed and buttons are displayed as it was originally.