jQuery toggleClass()

By: Rajesh P.S.

The jQuery toggleClass() method is a versatile tool for toggling the presence of a CSS class on selected HTML elements. It allows you to dynamically alternate between adding and removing a class, providing a straightforward way to implement interactive behaviors.

Basic Toggle

Suppose you have an HTML button element like this:

<button id="toggleButton">Toggle Highlight</button> <div id="content">This is the content to highlight.</div>

You can use jQuery to toggle a class on the content <div> element, when the button is clicked:

$("#toggleButton").click(function() { $("#content").toggleClass("highlight"); });

In this scenario, clicking the button will alternately add and remove the "highlight" class from the content <div>, resulting in dynamic styling changes.

Toggle with Multiple Classes

Continue Reading...

The toggleClass() method can also accept multiple classes, allowing for more complex toggling scenarios. Consider the following HTML structure:

With the following jQuery code, clicking the box element will toggle between different classes, creating varied visual effects:

$("#box").click(function() { $(this).toggleClass("large red"); });

In this case, clicking the box will toggle between the "large" and "red" classes, altering both the size and color of the box.

jQuery toggleClass() Example

The following code create a toggle effect in your webpage. This method takes one or more class names as its parameter.

$("p").toggleClass("highlight1"); $("div").toggleClass("highlight2");

<p class="highlight1">This is a paragraph</p> <div class="highlight2"> This is a Div</div>

The above code would remove a class with one click and in second click it would again add the same class. As with the other methods, multiple class names can be provided, separated by a space.

Browser View

This is a paragraph

This is a Div

Full Source

<html> <head> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggleClass("highlight1"); $("div").toggleClass("highlight2"); }); }); </script> <style> .highlight1 { background:red; } .highlight2 { background:green; } </style> </head> <body> <p class="highlight1">This is a paragraph</p> <div class="highlight2"> This is a Div</div> <br> <button>Click me</button> </body> </html>

Conclusion

The toggleClass() method streamlines the process of creating interactive and dynamic user interfaces, allowing for smooth transitions between different states without needing to manage class addition and removal manually.

Next > jQuery Dimensions

Related Topics