How to use HTML ToggleClass Method in JQuery
This article describe about HTML ToggleClass method in JQuery.
HTML toggleClass() method in jQuery
-
toggleClass() method toggles between add or remove one or more classes for the selected elements.
-
toggleClass() method checks each element for the specified classes.
-
In toggleClass() method, the classes are added if missing, and removed if already set - This creates a toggle effect.
Syntax
$(selector).toggleClass(class,switch)
|
Example
Following is a simple example a showing the usage of this method.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("button").click(function ()
{
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:100%;
color:blue;
}
</style>
</head>
<body>
<p>This is a JQuery.</p>
<p>This is .Netheaven.</p>
<button>Toggle effect after click this button</button>
</body>
</html>
|
Output1
Output2
Using a Function
toggleClass() method using a function to determine which classes should be toggled for the selected elements.
Syntax
$(selector).toggleClass(function(index,class),switch)
|
You may also want to read these related articles here
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here