Hide/show a element by id using JavaScript
In this post we will give you information about Hide/show a element by id using JavaScript. Hear we will give you detail about Hide/show a element by id 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 element by id using JavaScript.
Consider, we have a following html div element.
<div id="container">Hello</div>
To hide an element, first we need to access it inside the JavaScript using the document.getElementById() then set its style.display property to none.
Here is an example:
const element = document.getElementById("container");element.style.display= "none";To show an element back, we need to update the style.display property to block.
element.style.display = "block";
Using style.visibility property
We can hide an html element by id, set the element’s style.visibility propertyto hidden.
const element = document.getElementById("container");element.style.visibility= "hidden";To show an 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 Hide/show a element by id 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