How to hide and show DOM elements using JavaScript

There are multiple ways to show or hide DOM elements in vanilla JavaScript. In this article, we shall look at two ways to hide or show DOM elements using JavaScript.

Hide and show elements using CSS display property

The style display property is used to set and get the element's display type in JavaScript.

Majority of the HTML elements have the inline or block display type. The content of an inline element floats to its left and right sides. Block HTML elements are different because they * fill* the entire line and do not show content on their sides.

To hide an element, set the display property to none:

document.querySelector('.btn').style.display = 'none'

To show an element, set the display property to block (or any other value except none):

document.querySelector('.btn').style.display = 'block'

Hide and show elements using the CSS visibility property

Another way to show or hide DOM elements in JavaScript is using the style visibility property. It is similar to the above display property. However, if you set display: none, it hides the entire element from the DOM. The visibility:hidden hides the element contents, and the HTML element stays in its original position and size.

To hide an element, set the visibility property to hidden:

document.querySelector('.btn').style.visibility = 'hidden'

To show the element again, set the visibility property to visible like below:

document.querySelector('.btn').style.visibility = 'visible'

The style visibility property only hides the element but doesn't remove the space occupied by the element. If you also want to remove the space, set display: none using the display property.

Creating show() and hide() methods

jQuery provides hide(), show(), and toggle() utility methods that use inline styles to update the display property of the element.

Let us use the style property to create the above jQuery methods in vanilla JavaScript:

// hide an element
const hide = elem => {
  elem.style.display = 'none'
}

// show an element
const show = elem => {
  elem.style.display = 'block'
}

// toggle the element visibility
const toggle = elem => {
  // if the element is visible, hide it
  if (window.getComputedStyle(elem).display !== 'none') {
    hide(elem)
    return
  }

  // show the element
  show(elem)
}

Now to hide or show any DOM element, use the above methods:

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

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

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

Notice the use of the getComputedStyle() method, which we just learned the other day, to check if an element is already visible.

We used this method because the style property only deals with inline styles specified using the element's style attribute. But the HTML element could be hidden through an embedded <style> element or an external stylesheet. The getComputedStyle() method returns the actual CSS styles used to render an HTML element, regardless of how those styles were defined.

Another thing to notice is the getComputedStyle(elem).display !== 'none' statement. We are not checking whether the display type is block because block is not the only way to show an element. You could use flex, inline-block, grid, table, etc., for the display property to show an element. However, to hide an element, there is only one value, display: none.

If you prefer to use a CSS class to hide and show DOM elements instead of inline styles, read this guide.

✌️ 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.