How to Show or Hide a div Using JavaScript?

Sometimes, we may want to show or hide a div in our web app.

In this article, we’ll look at how to show or hide a div with JavaScript.

Manipulate the style.display Property

To show or hide a div with JavaScript, we can manipulate the style.display property to change the CSS display property.

We show the div if we set it to 'block' , 'inline' , or 'inline-block' .

'block' makes it block level, 'inline' makes it inline. 'inline-block' is like block except that it doesn’t add a line break after the element.

And we hide it if we set it to 'none' .

For instance, we can write the following HTML:

<button id='show'>
  show
</button>
<button id='hide'>
  hide
</button>

<div>
  hello
</div>

Then we can write the following JavaScript code to toggle the display property of the div:

const showBtn = document.querySelector('#show')
const hideBtn = document.querySelector('#hide')
const div = document.querySelector('div')

showBtn.addEventListener('click', () => {
  div.style.display = 'block'
})
hideBtn.addEventListener('click', () => {
  div.style.display = 'none'
})

We get the show and hide buttons and the div with document.querySelector .

Then we call addEventListener with the 'click' argument to add click listeners to the buttons.

When we click on showBtn , we set div.style.display to 'block' .

And when we click on hideBtn , we set div.style.display to 'none' .

Manipulate the style.visibility Property

We can also change the value of the style.visibility property to show or hide a div.

The difference between display and visibility is that display adds or remove the div from the screen when we change its value.

visibility keeps the space of the element regardless of whether it’s shown or hidden.

For example, we can write:

const showBtn = document.querySelector('#show')
const hideBtn = document.querySelector('#hide')
const div = document.querySelector('div')

showBtn.addEventListener('click', () => {
  div.style.visibility = 'visible'
})
hideBtn.addEventListener('click', () => {
  div.style.visibility = 'hidden'
})

and keep the HTML the same as the previous example.

'visible' makes the div visible and 'hidden' makes it hidden.

Show or Hide a Collection of Elements

We can show or hide a collection of elements easily with JavaScript.

For instance, if we have the following HTML:

<button id='show'>
  show
</button>
<button id='hide'>
  hide
</button>

<div>
  hello
</div>
<div>
  world
</div>

Then we can loop through each div to show and hide them.

To do this, we write the following JavaScript:

const showBtn = document.querySelector('#show')
const hideBtn = document.querySelector('#hide')
const divs = document.querySelectorAll('div')

showBtn.addEventListener('click', () => {
  for (const div of divs) {
    div.style.display = 'block'
  }
})
hideBtn.addEventListener('click', () => {
  for (const div of divs) {
    div.style.display = 'none'
  }
})

We get the buttons the same way as the previous examples.

Then we get both divs with querySelectorAll .

In the click listeners, we loop through the divs and set the style.display property for each div.

We can do the same thing with the visibility property.

Conclusion

We can show or hide one or more divs with JavaScript easily.