Hide and show DOM elements using a CSS class in JavaScript

In an article, I wrote how to hide and show DOM elements using inline styles in JavaScript. Today, you'll learn to hide and show elements using CSS classes in JavaScript.

Let us first declare a simple CSS class that hides the element, if applied, by setting display: none:

.hidden {
    display: none;
}

Next, say we have the following <button> element:

<button class="btn">Click Me</button>

Now, if you want to hide the above button from the DOM, add the hidden class by using the add() method provided by the classList object, like below:

// grab button element
const button = document.querySelector('.btn')

// hide it
button.classList.add('hidden')

To show the element again, simply removes the hidden class using the classList.remove() method:

button.classList.remove('hidden')

While inline styles work perfectly to toggle the element visibility, the CSS class gives you more flexibility to control the behavior like this.

Creating hide() & Show() methods

The classList object provides methods to add, remove, and toggle CSS classes from an element in JavaScript.

Let us use classList to create our own jQuery-like hide(), show(), and toggle() methods in pure JavaScript:

// hide an element
const hide = elem => {
  elem.classList.add('hidden')
}

// show an element
const show = elem => {
  elem.classList.remove('hidden')
}

// toggle the element visibility
const toggle = elem => {
  elem.classList.toggle('hidden')
}

Now, if you want to hide or show any DOM element, call the above method:

// hide
hide(document.querySelector('.btn'))

// show
show(document.querySelector('.btn'))

// toggle
toggle(document.querySelector('.btn'))

Read this guide to learn more about handling CSS classes in vanilla JavaScript.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.