To hide/show an element in JavaScript, you can use two methods –
- Use the style.display property to hide/show an element.
- Use the style.visibility property to hide/show an element.
There is a slight difference between these two methods, and what you choose depends on your needs.
Let’s have a look at both these methods.
Using the style.display Property To Hide/Show An Element In JavaScript
The style.display property is used to hide/show an element in HTML documents.
If the value of this property is set to “none”, then the element will be hidden from the page, and vice versa if the value is set to “block”.
To hide an element, set the style.display property to “none”.
To show an element, set the style.display property to “block”.
To hide an element –
element.style.display = "none";To show an element –
element.style.display = "block";Example
Here is an example of how to use the style.display property to hide/show a <div> element in JavaScript –
<html>
<head>
</head>
<body>
<h1>JavaScript Hide/Show an Element</h1>
<button id = "btn" onclick="show_hide()">Click Me</button><br><br>
<div id="example" style="display:none">
<p>This is a paragraph.</p>
</div>
<script>
function show_hide(){
var ele = document.getElementById("example");
var button = document.getElementById("btn");
if(ele.style.display == "block") {
ele.style.display = "none";
button.textContent = "Show Element";
}
else{
ele.style.display = "block";
button.textContent = "Hide Element"
}
}
</script>
</body>
</html>When you use a style.display property to hide an element, that element is removed from the normal flow of your document.
This means that other elements on the page will rearrange to fill the space where the hidden element was located.
If you want to hide an element without affecting the layout of your page, you can use a style.visibility property instead.
Using the style.visibility Property To Hide/Show An Element In JavaScript
The style.visibility property is used to hide/show an element in HTML documents.
If the value of this property is set to “hidden”, then the element will be hidden from the page, and vice versa if the value is set to “visible”.
To hide an element, set the style.visibility property to “hidden”.
To show an element, set the style.visibility property to “visible”.
To hide an element –
element.style.visibility = "hidden";To show an element –
element.style.visibility = "visible";Example
Here is an example of how to use the style.visibility property to hide/show a <div> element in JavaScript –
<html>
<head>
</head>
<body>
<h1>JavaScript Hide/Show an Element</h1>
<button id = "btn" onclick="show_hide()">Click Me</button><br><br>
<div id="example" style="visibility:hidden">
<p>This is a paragraph.</p>
</div>
<script>
function show_hide(){
var ele = document.getElementById("example");
var button = document.getElementById("btn");
if(ele.style.visibility == "visible") {
ele.style.visibility = "hidden";
button.textContent = "Show Element";
}
else{
ele.style.visibility = "visible";
button.textContent = "Hide Element"
}
}
</script>
</body>
</html>When you use the style.visibility property to hide an element, that element still takes up space in your document.
This means that other elements on the page will not rearrange to fill the space where the hidden element was located.
If you want to hide an element and have other elements on the page rearrange to fill the space where the hidden element was located, you can use a style.display property instead.
Conclusion
You can use either the style.display or style.visibility property to hide/show an element in JavaScript.
The main difference between these two properties is that when you use the style.display property to hide an element, that element is removed from the normal flow of your document.
This means that other elements on the page will rearrange to fill the space where the hidden element was located.
If you use the style.visibility property to hide an element, that element still takes up space in your document.
This means that other elements on the page will not rearrange to fill the space where the hidden element was located.