How to Use classList Toggle in JavaScript DOM

classList is the cleanest way to manage CSS classes on a DOM element from JavaScript. Instead of manipulating the className string and worrying about accidentally removing other classes, classList gives you simple methods: add, remove, toggle, contains, and replace. Each one targets a specific class without touching the rest.

javascript

const panel = document.querySelector("#panel");
panel.classList.add("open");

One line adds the class "open" to the panel. If the panel already had other classes, they stay untouched. If "open" was already there, nothing changes and no error is thrown.

The Five Methods

classList exposes five methods. Four of them are used daily. The fifth, replace, is newer but useful in specific cases.

add and remove: Apply and Clear Styles

The add and remove methods are the most common. They let you apply and clear visual states without touching the element's other classes.

javascript

const box = document.querySelector("#box");
box.classList.add("highlighted");
box.classList.add("bordered");

The box now has both "highlighted" and "bordered" classes in addition to any classes it already had. To remove one:

javascript

box.classList.remove("highlighted");

Now only "bordered" remains plus the original classes. You can add or remove multiple classes in one call by passing extra arguments:

javascript

box.classList.add("large", "rounded", "shadow");
box.classList.remove("large", "shadow");

toggle: The On/Off Switch

The toggle method is built for binary states: open or closed, visible or hidden, dark or light. Call it with a class name and it flips that class on or off.

javascript

const menu = document.querySelector("#dropdown");
menu.classList.toggle("open");

If "open" is absent, toggle adds it. If "open" is already present, toggle removes it. This single method powers every hamburger menu, collapsible panel, and show/hide button on the web.

The return value tells you which direction the toggle went:

javascript

const isNowOpen = menu.classList.toggle("open");
 
if (isNowOpen) {
  console.log("Menu is now visible");
} else {
  console.log("Menu is now hidden");
}

contains: Check Before Acting

Use contains to check if a class is present. It returns true or false without changing anything, which is useful whenever you need to know the current state before updating the UI.

javascript

const themeButton = document.querySelector("#theme-toggle");
const isDark = document.body.classList.contains("dark");
 
themeButton.textContent = isDark ? "Switch to Light" : "Switch to Dark";

The button label is set based on whether the "dark" class is currently on the body element, without changing that class at all. Combining contains with toggle lets you update button text right after a state change too, since toggle's return value tells you the new state directly.

replace: Swap One Class for Another

The replace method swaps one class for another in a single step. It is newer than the other methods but supported in all modern browsers.

javascript

element.classList.replace("old-theme", "new-theme");

If "old-theme" is not present, replace returns false and nothing changes. If it is present, the swap happens and replace returns true.

Why classList Over className

The older className property replaces the entire class attribute at once:

javascript

element.className = "open";  // Removes all other classes

This wipes out every other class on the element. classList methods target individual classes, leaving everything else alone. This is why classList is the standard approach in modern code.

For the broader topic of changing element appearance, see changing CSS styles with JavaScript. For selecting the elements you want to modify, see how to select DOM elements.