How to toggle a class in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Toggling CSS classes is fundamental for creating interactive UI elements like dropdown menus, modal dialogs, and state-based styling.
With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented class toggling in numerous interactive components and animation systems.
From my expertise, the most efficient approach is using the classList.toggle() method which adds the class if absent or removes it if present.
This method provides clean, readable code while handling the conditional logic automatically.
Use the classList.toggle() method to add or remove a class based on its current presence.
const element = document.getElementById('myElement')
element.classList.toggle('active')
Here document.getElementById('myElement') selects the target element, and element.classList.toggle('active') either adds the ‘active’ class if it doesn’t exist or removes it if it’s already present. The method returns a boolean indicating whether the class was added (true) or removed (false). This automatic conditional behavior eliminates the need for manual if-else statements to check class existence.
Best Practice Note:
This is the same approach we use in CoreUI components for managing active states, visibility toggles, and interactive element styling. The toggle method is perfect for binary states like show/hide, active/inactive, or expanded/collapsed UI elements.
