toggle class in javascript
How to Toggle Class in JavaScript
Introduction
Working with JavaScript can be very challenging but also very rewarding. One of the most common tasks you'll encounter is toggling classes. In this article, we'll talk about how to toggle class in JavaScript.
Using the classList.toggle() Method
The easiest way to toggle classes in JavaScript is by using the classList.toggle() method. This method adds a class to an element if it doesn't exist, or removes it if it does exist. Here's an example:
const button = document.querySelector('#button');
const box = document.querySelector('#box');
button.addEventListener('click', function() {
box.classList.toggle('visible');
});
In this code, we select a button and a box element. When the button is clicked, we call the classList.toggle() method on the box element and pass in the 'visible' class name. If the box element doesn't have the 'visible' class, it will be added. If it does have the 'visible' class, it will be removed.
Using the Element.classList.add() and Element.classList.remove() Methods
If you don't want to use the classList.toggle() method, you can use the Element.classList.add() and Element.classList.remove() methods to add and remove classes manually. Here's an example:
const button = document.querySelector('#button');
const box = document.querySelector('#box');
button.addEventListener('click', function() {
if (box.classList.contains('visible')) {
box.classList.remove('visible');
} else {
box.classList.add('visible');
}
});
In this code, we again select a button and a box element. When the button is clicked, we check if the box element has the 'visible' class using the Element.classList.contains() method. If it does, we remove the class using the Element.classList.remove() method. If it doesn't, we add the class using the Element.classList.add() method.
Conclusion
Now you know how to toggle class in JavaScript! Whether you use the classList.toggle() method or the Element.classList.add() and Element.classList.remove() methods, toggling classes is an essential skill for any JavaScript developer.