# How to hide and show DOM elements using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Mar 3, 2020, updated Oct 15, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-hide-show-dom-elements

> A quick guide to learn how to hide or show DOM elements using vanilla JavaScript.

There are multiple ways to show or hide [DOM](https://attacomsian.com/blog/getting-dom-elements-javascript) 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](https://attacomsian.com/blog/javascript-dom-style-property) `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`:

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

To show an element, set the `display` property to `block` (or any [other value](https://developer.mozilla.org/en-US/docs/Web/CSS/display) except `none`):

```javascript
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`:

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

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

```javascript
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](https://api.jquery.com/hide/) provides `hide()`, `show()`, and `toggle()` utility methods that use [inline styles](https://attacomsian.com/blog/javascript-dom-style-property) to update the `display` property of the element.

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

```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:

```javascript
// 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](https://attacomsian.com/blog/javascript-get-css-styles#getting-rendered-styles),  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](https://attacomsian.com/blog/javascript-hide-show-elements-using-css-class).