How to Make a Div Visible and Invisible with JavaScript?

Sometimes, we want to make a div visible or invisible with JavaScript.

In this article, we’ll look at how to make a div visible or invisible with JavaScript.

Make a Div Visible and Invisible with JavaScript with the visibility Property

One way to make a div visible or invisible is with the visibility property.

For instance, if we have a div:

<div>  
  hello world  
</div>

Then we can make it visible with:

const div = document.querySelector('div')  
div.style.visibility = 'visible'

And we can make it invisible with:

const div = document.querySelector('div')  
div.style.visibility = 'hidden'

Make a Div Visible and Invisible with JavaScript with the display Property

Another way to make a div visible or invisible is with the display property.

For instance, if we have a div:

<div>  
  hello world  
</div>

Then we can make it visible with:

const div = document.querySelector('div')  
div.style.display = 'inline';

to make the div display inline with other elements.

And we can write:

const div = document.querySelector('div')  
div.style.display = 'block';

to make it display in its own row.

And we can make it invisible with:

const div = document.querySelector('div')  
div.style.display = 'none';

Conclusion

One way to make a div visible or invisible is with the visibility property.

Another way to make a div visible or invisible is with the display property.