Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHPHide 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.
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.
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. It means the div is not hidden, it is just not visible to us. This method is not recommended if your task is to hide the div.
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> Conclusion
In this article we understood three different approaches to hide a div in JavaScript on button click. These approaches are by using display property, by using visibility property and by using opacity property. Any approach can be used for this, but mostly display property is used.
6K+ Views
