Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Hide a div in JavaScript on Button Click?
To hide a div in JavaScript on button click we will be discussing three different approaches with example codes. We will hide the div upon clicking the button and similarly display the hidden div upon clicking the button.
In this article we are having a div element. Our task is to hide the div on clicking the button using JavaScript.
Approaches to Hide div on Button Click
Here is a list of approaches to hide a div in JavaScript on button click which we will be discussing in this article with stepwise explanation and complete example codes.
Using display Property
To hide a div in JavaScript on button click, we have used the display property. By setting the display property to none, we can hide the div and by setting it to block we can display the hidden div again.
The display: none completely removes the element from the document layout, freeing up the space it occupied.
Example
Here is a complete example code implementing above mentioned steps to hide a div in JavaScript on button click using display property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hiding div On Button Click</title>
</head>
<body>
<button onclick="hide()">Click To Hide</button>
<div id="myDiv">
Click to hide this div.
</div>
<script>
function hide() {
var divs = document.getElementById("myDiv");
if (divs.style.display === "none") {
divs.style.display = "block";
} else {
divs.style.display = "none";
}
}
</script>
</body>
</html>
Using visibility Property
In this approach to hide a div in JavaScript on button click, we have used visibility property. By setting the visibility property to hidden, we can hide the div and by setting it to visible we can display the hidden div again.
Unlike display: none, the visibility: hidden property hides the element but maintains its space in the layout.
Example
Here is a complete example code implementing above mentioned steps to hide a div in JavaScript on button click using visibility property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hiding div On Button Click</title>
</head>
<body>
<button onclick="hide()">Click To Hide</button>
<div id="myDiv">Click to hide this div.</div>
<script>
function hide() {
const divs = document.getElementById('myDiv');
if (divs.style.visibility === "hidden") {
divs.style.visibility = "visible";
} else {
divs.style.visibility = "hidden";
}
}
</script>
</body>
</html>
Using opacity Property
In this approach we have used opacity property to hide a div in JavaScript on button click. By setting the opacity to 0, we can make the div invisible. The element remains in the layout and can still receive events, making it less ideal for true hiding.
Example
Here is a complete example code implementing above mentioned steps to hide a div in JavaScript on button click using opacity property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hiding div On Button Click</title>
</head>
<body>
<button onclick="hide()">Click To Hide</button>
<div id="myDiv">Click to hide this div.</div>
<script>
function hide() {
const divs = document.getElementById('myDiv');
if (divs.style.opacity === "0") {
divs.style.opacity = "1";
} else {
divs.style.opacity = "0";
}
}
</script>
</body>
</html>
Comparison of Methods
| Property | Removes from Layout | Can Receive Events | Best Use Case |
|---|---|---|---|
display: none |
Yes | No | Complete hiding with layout reflow |
visibility: hidden |
No | No | Hide while preserving space |
opacity: 0 |
No | Yes | Fade effects and animations |
Conclusion
We explored three methods to hide divs in JavaScript: display, visibility, and opacity properties. The display: none approach is most commonly used as it completely removes the element from the layout, providing true hiding functionality.
7K+ Views
