April 26, 2021

How to toggle HTML classes in vanilla JavaScript

I’ve done this a million times in jQuery, simply by using toggleClass() on a jQuery object.

You can achieve the same effect in vanilla JS:

let el = document.getElementById("main");
el.classList.toggle('menu-open');

Also, there’s a second parameter that forces the toggle to always remove or always add. So you could use that to add some simple logic.

let el = document.getElementById("some-button");
el.classList.toggle('menu-open', someBoolean);

Read more