Updated March 23, 2023
Introduction of jQuery toggleClass
jQuery simplifies the JavaScript programming language which is easy to learn and we can extend it by writing plugins. It supports many features like animations, event handling, DOM manipulation, lightweight, AJAX support, and cross-browser support. By using the toggleClass() method we can toggle between the classes with selected elements from the set of matched elements. When we want to switch between the effects or styles whenever we are changes the states of our user interface to make it a more attractive and interactive user interface this can be done quickly and easily by using the toggleClass() method.
Syntax:
In simple words, we can say that the toggleClass() method is used to add or remove a class from the element. The toggleClass() method syntax in the jQuery. It is an inbuilt method in jQuery.
$(selector).toggleClass(className [ , function] [, switch][,options])Parameters of jQuery toggleClass()
It contains some parameters. Some of the details of the parameters are:
- className: The className should be of string type. It can take one or more class names they are separated by commas.
- Function: It is an optional parameter that returns the class names. It takes the index position and class name of an element.
- Switch: The switch should be of a Boolean type and it is an optional parameter. It helps us to determine whether a class should be added or removed.
- Duration: The duration can be a string or a number. It can be either a time in milliseconds or it can be preset. The default value of the duration is 400 milliseconds. It can take slow, fast or normal as a string parameter. This helps us to control the slide animation based on our requirements.
- Easing: The easing should be of string type. It is used for transition. The default value is swing.
- Queue: The queue takes the Boolean value. If the Boolean value is true it indicates whether to place or not to place the animation. If the Boolean value is false the animation will take place immediately.
- Complete: This function is called once the animation is completed on an element.
- Children: Children take the Boolean value. It is helpful to determine which descendant to animate.
Examples of jQuery toggleClass()
This is a simple example of the toggleClass() method. In this example, we can observe the toggleClass() method effect on the paragraph.
Example #1
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").toggleClass("highlight");
});
});
</script>
<style>
.highlight {
background:blue;
font-size: 200%;
color: white;
}
</style>
</head>
<body>
<button id = "btn"> Click on the button to see toggleClass effect</button>
<p>Example for the toggleClass effect</p>
</body>
</html>Output:
- In the output, we can observe before clicking on the button “click on the button to see the toggleClass effect”.
- The paragraph is in normal font size without background and color as shown in the below figure.
- After clicking on the button we can observe that font size, background and text color is changed due to the toggleClass() method.
- In this program, we have passed the .highlight class to the toggleClass() method. In the .highlight class, we gave the background, font size, and color and it is passed to the toggleClass() which got applied to the paragraph as we can see it in the below image.
- Again by clicking on the button it gets back to the normal size. We can toggle between both by clicking on the button.
This is another example of the toggleClass() method by using the function.
Example #2
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").toggleClass(function(n){
return "listitem_" + n;
});
});
});
</script>
<style>
p {
margin: 8px;
font-size: 20px;
font-weight: bolder;
cursor: pointer;
}
.main {
background: yellow;
}
.listitem_1, .listitem_3,.listitem_5 {
color: blue;
}
.listitem_0, .listitem_2 ,.listitem_4{
color: pink;
}
</style>
</head>
<body>
<ul>
<h1>List of student names</h1>
<li><p class="main">Sai</p></li>
<li><p class="main">Bharat</p></li>
<li><p class="main">Vanitha</p></li>
<li><p class="main">Sony</p></li>
<li><p class="main">Anna Purna</p></li>
<li><p class="main">Vasavi</p></li>
</ul>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "main" );
});
</script>
<button>Click on the button for toggleClass effects</button>
</body>
</html>Output:
- Before clicking on the button “click on the button for the toggleClass effects” we can see a list of the student names are getting displayed with black color text and background yellow.
- After clicking on the button we can observe that the list of student names with even and odd order are with different colors. The even number list is changed to the pink color as we have mentioned in the code i.e., list_item with 0,2,4 should apply the pink color and the odd number list list_item with 1,3,5 should apply the blue color. The changes got applied to the output.
- On Clicking on the particular names we can observe that the color is changed to the white color as we can see it in the below image.
- Again by clicking on the button “click on the button for toggleClass effects” we can see a list of the student names is restored to the normal image, same as 1st image of this program.
This is an example of the toggleClass() method by using a switch parameter.
Example #3
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("p").toggleClass("highlight",true);
});
$("#remove").click(function(){
$("p").toggleClass("highlight",false);
});
});
</script>
<style>
.highlight {
background-color: blue;
font-size: 200%;
color: white;
}
</style>
</head>
<body>
<p>ToggleClass effects explained by using example.</p>
<p class="highlight">Switch parameter to add or remove a class name.</p>
<button id="add">Add toggleClass</button>
<button id="remove">Remove toggleClass </button>
</body>
</html>Output:
- In this example, before clicking on the buttons the output is shown below.
- After clicking on the button “Add toggleClass” we can observe that the effects of background-color, font-size, and color got applied to the first paragraph.
- By clicking on the button “Remove toggleClass” we can observe that the effects of background-color, font-size, and color got removed for both the paragraph.
These are some of the examples of the toggleClass() method by using some of the parameters.
Recommended Articles
This is a guide to jQuery toggleClass(). Here we discuss the introduction, parameters, and different examples of jQuery toggleClass() with code implementation. You may also look at the following articles to learn more –
