Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Toggle an Element Class in JavaScript?
Toggling an element class means adding and removing a particular class from the HTML element based on a certain condition.
For example, we want to highlight the HTML div element, and when the mouse enters, we need to add a particular class with a different style in the HTML element.
Here, we will learn various approaches to toggle an element class using JavaScript and jQuery. In this tutorial, we will learn to toggle an element class in JavaScript.
Using the toggle() method of the classList
The toggle() method toggles the class in the element. It checks if the class exists, it removes the class; Otherwise, it adds the class into the element.
Syntax
Users can follow the syntax below to use the toggle() method to toggle an element class using JavaScript.
divElement.classList.toggle("class_name");
In the above syntax, divElement is an HTML element in which we wanted to toggle the class passed as a parameter of the toggle method.
Example 1
In the example below, we have created the div element and given some styles. When a user clicks the button, it invokes the toggleClass() function. In the toggleClass() function, we have accessed the div element using its id.
After that, we apply the toggle() method on the classList of the div element. The classList property returns all the div element's classes in the array format. Furthermore, we have passed the ‘color’ class name as a parameter of the toggle() method. So, it will add and remove the color class from the div element.
<html>
<head>
<style>
div {
width: 10rem;
height: 10rem;
border: 2px solid blue;
border-radius: 12px;
}
.color {
background-color: grey;
}
</style>
</head>
<body>
<h2>Using the <i> toggle() method </i> to toggle and element class using JavaScript.</h2>
<h3>Click the below button to add and remove the class from the below div.</h3>
<div id="div-ele"></div>
<br>
<button onClick="toggleClass()">Toggle color class</button>
<script>
function toggleClass() {
let divElement = document.getElementById('div-ele');
divElement.classList.toggle("color");
}
</script>
</body>
</html>
In the above output, users can observe that it changes the background color of the div element when we click the button, as it toggles the color class for a div element.
Using the contains(), add(), and remove() method
The contains method checks whether the array contains a particular element. The add() method adds the class to the element, and the remove() method removes the class from the element.
We can get all the classes the element contains using the classList property, and then we can use the contains() method to check if the element contains a particular class. We can add it if it doesn’t contain it; Otherwise, we need to remove the class.
Syntax
Users can follow the syntax below to use the contains(), add(), and remove() methods to toggle the class for an element.
if (divElement.classList.contains("class_name")) {
divElement.classList.remove("circle");
} else {
divElement.classList.add("circle");
}
In the above syntax, we check if classList contains the class_name class using the contains() method, and based on that, we add and remove the class from the element.
Example 2
In the example below, we have given some styles to the div element. Also, we have created the ‘circle’ class, which converts the div into a circle. Whenever the user clicks the button, the toggleClass() function checks if the div element contains the ‘circle’ class. If the contains() method returns true for the circle class, we use the remove() method with classList to remove the circle class from the div. Otherwise, we use the add() method to add the ‘circle’ class in the div element.
<html>
<head>
<style>
div {
width: 10rem;
height: 10rem;
border: 2px solid yellow;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: larger;
}
.circle {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Using the <i> contains(), add(), and remove() method </i> to toggle and element class using JavaScript. </h2>
<h3>Click the below button to add and remove the circle class from the below div. </h3>
<div id="div-ele">
Square
</div>
<br>
<button onClick="toggleClass()">Toggle color class</button>
<script>
function toggleClass() {
let divElement = document.getElementById('div-ele');
let allClass = divElement.classList;
// if the element contains the circle class, remove it; Otherwise, add it.
if (allClass.contains("circle")) {
divElement.classList.remove("circle");
divElement.innerHTML = "Square";
} else {
divElement.classList.add("circle");
divElement.innerHTML = "Circle";
}
}
</script>
</body>
</html>
In the above output, users can observe the div toggles between the circle and square shapes whenever they click the button.
Using the JQuery’s toggleClass() method
The JQuery contains the toggleClass() method, which works the same as the toggle() method of JavaScript. We can take an HTML element as a reference of the toggleClass() method and pass the class name as a parameter.
Syntax
Users can follow the syntax below to use JQuery’s toggleClass() method to toggle an element class.
$(element).toggleClass("class_name");
In the above syntax, users should replace the element with an element id, class, or tag to access the element using JQuery. The class_name is the class name to toggle for a reference element.
Example 3
In the example below, we change the color of the text of the <span> element by toggling the text_color class for the <span> element using JQuery’s toggleClass() method.
In the output, users can observe that it toggles the span element’s text color between red and the default color whenever they press the button.
<html>
<head>
<style>
.text_color {
color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> JQuery's toggleClass() method </i> to toggle and element class using JQUery. </h2>
<h3>Click the below button toggle text_color class from the below span element.</h3>
<span>This is a sample text.</span>
<br>
<br>
<button onClick="toggleClass()">Toggle color class</button>
<script>
function toggleClass() {
$("span").toggleClass("text_color");
}
</script>
</body>
</html>
We learned three approaches to toggle an element class using JavaScript and JQuery. Users can use the toggle() method when they want to write code in JavaScript and the toggleClass() method when they want to write code using JQuery.
4K+ Views
