In CSS, we can create cool animation and transitions to elements with the help of JavaScript. JavaScript is being used to toggle CSS classes, in fact most of the popular libraries like jQuery has functions to toggles CSS classes.

I used jQuery in most of my projects. However, if you prefer to use plain JavaScript and find libraries are too bloated for your needs, toggling CSS is not that easy. And that’s where classie.js comes to the rescue, an awesome mega lightweight script that allows you to add, remove, and check classes in the DOM very easily.

Here is a sample implementation.

var elem = document.getElementById("element");

// Remove a class
classie.remove(elem,"my-class");

// Add a class
classie.add(elem,"another-class");

// check if element has class
if (classie.has(elem,"my-class")) {
    console.log('The class exist');
}

See how easy it is to toggle classes where classie.js did the heavy lifting.

Please open the demo link below and see the implementation of this tutorial. You can also find the download and Github link below.