Toggle class on HTML element without jQuery

by

You can toggle classes using the classList.toggle() function:

var element = document.getElementById('sidebar');
var trigger = document.getElementById('js-toggle-sidebar'); // or whatever triggers the toggle

trigger.addEventListener('click', function(e) {
    e.preventDefault();
    element.classList.toggle('sidebar-active'); // or whatever your active class is
});

That should do everything you need – if you have more than one trigger I’d recommend using document.querySelectorAll(selector) instead.

Leave a Comment