Hide and show DOM elements using a CSS class in JavaScript

In this article 👇

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.

You might also like...

Digital Ocean

The simplest cloud platform for developers & teams. Start with a $200 free credit.

Buy me a coffee ☕

If you enjoy reading my articles and want to help me out paying bills, please consider buying me a coffee ($5) or two ($10). I will be highly grateful to you ✌️

Enter the number of coffees below:

✨ Learn to build modern web applications using JavaScript and Spring Boot

I started this blog as a place to share everything I have learned in the last decade. I write about modern JavaScript, Node.js, Spring Boot, core Java, RESTful APIs, and all things web development.

The newsletter is sent every week and includes early access to clear, concise, and easy-to-follow tutorials, and other stuff I think you'd enjoy! No spam ever, unsubscribe at any time.