Toggle css classes in vanilla js

// Browser support - Chrome 8.0 - Firefox 3.6 - IE 10 - Opera 11.50 - Safari 5.1 // Use https://github.com/eligrey/classList.js/blob/master/classList.js for support >= IE8 // Example HTML // <div class='your-class-name opened'></div> // querySelector always returns the first element matched var $element = document.querySelector('your-class-name'); // add a class $element.classList.add('active'); // remove a class $element.classList.remove('opened'); // toggle a class $element.classList.toggle('selected'); // toggle a class if div contains an existing class var hasOpened = $element.classList.contains('opened'); $element.classList.toggle('selected', hasOpened);