JavaScript classList.toggle
last modified April 2, 2025
In this article, we explore the classList.toggle method in
JavaScript. This method is essential for dynamic CSS class manipulation,
allowing developers to add or remove classes from elements with ease.
Basic Definition
The classList.toggle method adds or removes a CSS class from an
element. If the class exists, it removes it; if it doesn't exist, it adds it.
This provides a simple way to switch between visual states.
The method returns true if the class is added and false if it is removed. It optionally accepts a second boolean parameter to force add or remove the class.
Basic classList.toggle
This example demonstrates how to toggle a simple CSS class on a div element.
<!DOCTYPE html>
<html>
<head>
<title>Basic classList.toggle</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="content">Click me to highlight!</div>
<script>
const element = document.getElementById('content');
element.addEventListener('click', function() {
this.classList.toggle('highlight');
});
</script>
</body>
</html>
In this basic example, we have a div element with an event listener. When
clicked, the highlight class is toggled on the element.
This demonstrates the fundamental usage of classList.toggle to
dynamically change element styling. The method automatically handles both
adding and removing the class.
Toggle with Button Control
This example shows how to toggle a class using a separate button element.
<!DOCTYPE html>
<html>
<head>
<title>Toggle with Button</title>
<style>
.active {
color: red;
border: 2px solid red;
}
</style>
</head>
<body>
<p id="text">This text can be activated</p>
<button id="toggleBtn">Toggle Active State</button>
<script>
const text = document.getElementById('text');
const button = document.getElementById('toggleBtn');
button.addEventListener('click', function() {
text.classList.toggle('active');
});
</script>
</body>
</html>
Here we have a paragraph and a button. When the button is clicked, the
active class is toggled on the paragraph element.
This demonstrates how classList.toggle can be controlled by
separate elements. The styling changes are kept in CSS while JavaScript
handles the state changes.
Forced Toggle with Boolean Parameter
This example demonstrates the optional force parameter of toggle.
<!DOCTYPE html>
<html>
<head>
<title>Forced Toggle</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="box">Content to show/hide</div>
<button onclick="showContent()">Show</button>
<button onclick="hideContent()">Hide</button>
<script>
const box = document.getElementById('box');
function showContent() {
box.classList.toggle('hidden', false);
}
function hideContent() {
box.classList.toggle('hidden', true);
}
</script>
</body>
</html>
In this example, we have two buttons that force the hidden class
to be either added or removed, rather than toggling. The second parameter
controls this behavior.
This shows how classList.toggle can be used to explicitly add or
remove classes without checking current state. The force parameter makes the
method behave like add or remove.
Toggle Multiple Classes
This example shows how to toggle multiple classes simultaneously.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Classes</title>
<style>
.big {
font-size: 2em;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p id="text">Click to change my appearance</p>
<script>
const text = document.getElementById('text');
text.addEventListener('click', function() {
this.classList.toggle('big');
this.classList.toggle('blue');
});
</script>
</body>
</html>
Here we toggle two different classes on a paragraph element when clicked. Both classes are added or removed together, creating a compound visual change.
This demonstrates how multiple classList.toggle calls can be used
together to create more complex styling changes. Each class is toggled
independently of the others.
Dark/Light Mode Toggle
This example creates a complete dark/light mode toggle for a page.
<!DOCTYPE html>
<html>
<head>
<title>Dark Mode Toggle</title>
<style>
body {
background: white;
color: black;
transition: all 0.3s ease;
}
body.dark {
background: #222;
color: white;
}
</style>
</head>
<body>
<h1>Dark Mode Example</h1>
<p>Click the button to toggle dark mode</p>
<button id="modeToggle">Toggle Dark Mode</button>
<script>
const toggle = document.getElementById('modeToggle');
toggle.addEventListener('click', function() {
document.body.classList.toggle('dark');
});
</script>
</body>
</html>
In this practical example, clicking the button toggles a dark class
on the body element. The CSS handles all the styling changes for dark mode.
This demonstrates a real-world use case for classList.toggle. The
transition property creates a smooth animation between the two states.
Source
MDN classList.toggle Documentation
In this article, we have shown how to use classList.toggle in
JavaScript. This method is fundamental for dynamic class manipulation and state
management in web development.
Author
List all JS DOM tutorials.