How to Hide/show a div using JavaScript
In this post we will give you information about How to Hide/show a div using JavaScript. Hear we will give you detail about How to Hide/show a div using JavaScriptAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to hide/show a div element using JavaScript.
Consider, we have a following HTML div element.
<div id="container">Hello</div>
To hide a div , first we need to access the div element inside the JavaScript using the document.getElementById() method then set its style.display property to none.
Here is an example:
const element = document.getElementById("container");element.style.display= "none";To show an div back, we need to update the style.display property to block.
element.style.display = "block";
Using style.visibility property (alternative approach)
We also can hide a div by setting it’s element style.visibility propertyto hidden.
const element = document.getElementById("container");element.style.visibility= "hidden";To show a div element back, we need to update the style.visibility property to visible.
element.style.visibility= "visible";
The main difference between style.display and style.visibility properties are:
When we set a style.display property to none, it removes the element completely from the dom .
When we set a style.display property to hidden, it just hides the element but doesn’t remove it in the dom.
Hope this code and post will helped you for implement How to Hide/show a div using JavaScript. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs