How to Toggle Classes With the JavaScript classList Property

How to toggle classes on elements with JavaScript is one of the most practical skills you can learn as a developer. Toggling is used for many things, including showing and hiding menus, adding and removing search filters, and social media buttons (likes, thumbs up etc.).

Toggling doesn’t have to be more complicated than a few lines of code, depending on the context, of course. Today we’ll learn a simple way to start with not only toggling but learning JavaScript in general.

The HTML Structure

Before we get to the functional stuff with JavaScript, let’s set up a few HTML elements so we have something to interact with. Let‘s create a wrapper, a button, and a box.

Put the following inside your HTML document’s body tags:

<div class="wrapper">
  <button class="button">Toggle</button>
  <div class="box"></div>
</div>

The parent div element (the wrapper) is only there so we can center its children elements (the box and the button) with CSS. This is cosmetic, and not necessary for this to work.

Note: if you’re using an online code editor like CodePen you can add this code in the HTML tab window. They add the rest of the HTML for you behind the scenes, including body tags.

CSS Style

The parent div element has a .wrapper class which has some Flexbox properties that center aligns its child elements: the box and the button. I won’t get into the how and the why of Flexbox, that’s for another tutorial.

The button and the box get some basic style classes for cosmetic purposes.

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

The important thing to focus on here is the .bg-red class which contains the CSS background-color property with a value of '#AA2F18' (red). This is the class that we want to toggle (add or remove) to our box element when we click on the button element.

JavaScript Event Handling

Before we can start manipulating elements with JavaScript, we must first store a reference to our two elements (the box and the button). We do that by declaring two variables, button, and box. Then we assign the two elements to their respective variables.

To select the box and button element that we want to store a reference to we’ll use the glorious querySelector method to grab our elements’ classes:

let button = document.querySelector(".button");
let box = document.querySelector(".box");

Now that we have a reference to each of our target elements, we can DOM manipulate them, by accessing their properties and methods. In this case, we want to use an event listener that listens to a click event on the button element. After the click has been detected we want to execute a function that runs the background color toggling on our box element.

To do that we’ll attach the addEventListener() method to our button element (via its variable reference). Inside this event listener method we’re adding two parameter values: 'click' (the event type), and function(). We’ll use an anonymous (unnamed) function in this example.

Then inside the anonymous function: we attach the JavaScript classList property’s toggle() method to our box element. The toggle method’s job is to either add or remove our .bg-red class:

button.addEventListener("click", function() {
  box.classList.toggle("bg-red");
});

The classList toggle method works like this: if the specified class already exists on the target element, then it will be removed. If it does doesn’t exist, then it will be added.

We’re done! You now know how to toggle classes on specified elements with plain JavaScript. I put up all the code from this tutorial on CodePen.

The code is compatible with all modern browsers from IE10 and up.