jQuery Change Class Examples – Add Class, Remove Class, Toggle Class & more
jQuery provides us with different methods to ease up the process of working with classes assigned to elements. Some of the main methods are to add class, remove Class, toggle Class & to check if an element has a class or not, change class using jQuery. In this article, I am going to discuss all of those methods with an example for each.
Examples to Add Class, Remove Class, Change Class, Toggle Class, Check if has Class using in jQuery
Let’s assume that we have a div with ID “my_div“. Now we will see how we can add a class, replace existing class, remove applied class, check to see if it has a specific class & toggle class using jQuery with relevant examples.
Here is the HTML source code common for all examples below:
<html>
<head>
<title>Add Class, Remove Class, Toggle Class using jQuery</title>
<script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
<style type="text/css">
.green {
background-color: #B3FFB3;
}
.red {
background-color: #FFBFBF;
}
</style>
</head>
<body>
<div id="my_div">This is my div</div>
<input type="submit" name="add_class" id="add_class" value="Add Class Green">
<input type="submit" name="remove_class" id="remove_class" value="Remove Class Green">
<input type="submit" name="has_class" id="has_class" value="Has Class Red?">
<input type="submit" name="toggle_class" id="toggle_class" value="Toggle Red Class">
</body>
</html>Example 1: Add a class to div using .addClass() method in jQuery
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
//Add a class to the div
$('#add_class').click( function(){
$('#my_div').addClass('green');
});
});
</script>Example 2: Remove an already applied class from the div using .removeClass() method in jQuery
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
//Remove an already applied class from the div
$('#remove_class').click( function(){
$('#my_div').removeClass('green');
});
});
</script>Example 3: Check if a class has already been applied or not using .hasClass() method in jQuery
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
//Check if a class has already been applied or not. Alerts true if has class or false if it does not have class
$('#has_class').click( function(){
alert( $('#my_div').hasClass('red') );
});
});
</script>Example 4: Toggle an existing class of the div with a new class using .toggleClass() method in jQuery
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
//Toggle an existing class of the div with a new class
$('#toggle_class').click( function(){
$('#my_div').toggleClass('red');
});
});
</script>In order to test the above example, if there’s no class applied to div and you click on the ‘Toggle Red Class’ button, that will apply the red background color to the div. If you click on the button again, that will remove the red background color and thus make it a transparent background.
However, if you now click on the ‘Add Class Green’ button & then click on ‘Toggle Red Class’ button twice, you will notice that when you first click the button, it will remove the green class & apply the red class. When you click the button the second time, it will then remove the red class & apply the class that was previously assigned to the div, i.e. the green class. So in short, Toggle class will simply toggle the recent most class with the class that has been already assigned to the element (if any).
That’s it for now!
Do you know of any other ways to change class i.e. add class, remove class, toggle class, check if has class using jQuery? Feel free to suggest by commenting below.