The toggleClass() method toggles
between adding and removing one or more class names from the selected
elements.This method checks each element for the specified class names. The
class names are added if missing, and removed if already set - This creates a
toggle effect.However, by using the "switch" parameter, you can
specify to only remove, or only add a class name.
Syntax
|
$(selector).toggleClass(classname,function(index,currentclass),switch)
|
Example
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); });
});
</script> </head> <body>
<p>This is a paragraph.</p>
<button>Toggle between hide() and show()</button>
</body> </html> |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggleClass("main"); });
});
</script> <style> .main { font-size: 120%; color: red; }
</style> </head> <body>
<button>Toggle class "main" for p elements</button>
<p><b>Note:</b> Click the button more than once to see the toggle effect.</p> <p>This is a paragraph.</p> <p>This is another paragraph.</p>
</body> </html> |
