How to add and remove classes in Javascript (without jQuery)

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

Below is the one liner example on how to add / remove class:

//Add class
document.getElementById("elementId").classList.add("classToBeAdded");
 
//Remove class
document.getElementById("elementId").classList.remove("classToBeRemoved");

You can also add or remove multiple classes

element = document.getElementById("elementId")
element.classList.add("foo", "bar", "baz");
element.classList.remove("foo", "bar", "baz");

The classList.toggle() method in JavaScript allows you to toggle a CSS class on an HTML element.

If the element already has the specified class, classList.toggle() removes it.

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

Refrence

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Read also

Hugo: Using getJSON to fetch remote REST API in hugo template

Hugo is very powerful static site builder, it can fetch any JSON rest API and build content out of it. In this example we will use getJSON hugo function to fetch the json data from Woocommerce site. You can develope this further and create a full fledged headless e-commerce website with hugo at the frontend wordpress and woocommerce as a backend.

Hugo: frontmatter title block code snippet for Visual Studio Code

In VSCode, Code Snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. Learn how to use code snippets to generate frontmatter title block for Hugo

Hugo Shortcode to include a markdown file

Here is how you can use shortcode’s to include a another markdown file in hugo. Including markdown will help you reuse contents from another blog markdown post/article

Hugo partial code to add class to table

There is no straight direct way to add a css class to hugo tables for styling. We use a workaround to add class to hugo marked-down tables

Hugo: How to generate Webp images for your websites & blog

Learn how to use Hugo’s builtin Image processing feature to generate Webp Image and boost your website speed & SEO ranking.