Hide or show elements in HTML using display property - GeeksforGeeks

28 Jul, 2021
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery.
To hide an element, set the style display property to “none”.
document.getElementById("element").style.display = "none";

To show an element, set the style display property to “block”.
document.getElementById("element").style.display = "block";

Steps to show the working of style display property:Create some div and assign them an id or class and then add styling to it.<div class="circle" id="circle"></div><div class="rounded" id="rounded"></div><div class="square" id="square"></div>Width and height will set the width and height of the content, border-radius 0% will make a square border, 50% will make a circle and 25% will make a rounded shape and float will make the divs get positioned, margin-right will make them separated with a space at right.<style type="text/css">       .circle {           width: 130px;           height: 130px;           border-radius: 50%;           float: left;           margin-right: 50px;       }                .rounded {           width: 130px;           height: 130px;           border-radius: 25%;           float: left;           margin-right: 50px;       }                .square {           width: 130px;           height: 130px;           border-radius: 0%;           float: left;           margin-right: 50px;       }Background-color will set the background color of the div.#circle {           background-color: #196F3D;       }         #rounded {           background-color: #5DADE2;       }         #square {           background-color: #58D68D;       }The document.getElementById will select the div with given id.<script type="text/javascript">        document.getElementById("circle").onclick = function()The style.display = "none" will make it disappear when clicked on div..style.display = "none";
Create some div and assign them an id or class and then add styling to it.<div class="circle" id="circle"></div><div class="rounded" id="rounded"></div><div class="square" id="square"></div>
<div class="circle" id="circle"></div><div class="rounded" id="rounded"></div><div class="square" id="square"></div>
Width and height will set the width and height of the content, border-radius 0% will make a square border, 50% will make a circle and 25% will make a rounded shape and float will make the divs get positioned, margin-right will make them separated with a space at right.<style type="text/css">       .circle {           width: 130px;           height: 130px;           border-radius: 50%;           float: left;           margin-right: 50px;       }                .rounded {           width: 130px;           height: 130px;           border-radius: 25%;           float: left;           margin-right: 50px;       }                .square {           width: 130px;           height: 130px;           border-radius: 0%;           float: left;           margin-right: 50px;       }
<style type="text/css">       .circle {           width: 130px;           height: 130px;           border-radius: 50%;           float: left;           margin-right: 50px;       }                .rounded {           width: 130px;           height: 130px;           border-radius: 25%;           float: left;           margin-right: 50px;       }                .square {           width: 130px;           height: 130px;           border-radius: 0%;           float: left;           margin-right: 50px;       }
Background-color will set the background color of the div.#circle {           background-color: #196F3D;       }         #rounded {           background-color: #5DADE2;       }         #square {           background-color: #58D68D;       }
#circle {           background-color: #196F3D;       }         #rounded {           background-color: #5DADE2;       }         #square {           background-color: #58D68D;       }
The document.getElementById will select the div with given id.<script type="text/javascript">        document.getElementById("circle").onclick = function()
<script type="text/javascript">        document.getElementById("circle").onclick = function()
The style.display = "none" will make it disappear when clicked on div..style.display = "none";
.style.display = "none";
Implementation of style.display property:
<html><head>      <title>Javascript</title>      <style type="text/css">        .circle {            width: 130px;            height: 130px;            border-radius: 50%;            float: left;            margin-right: 50px;        }                  .rounded {            width: 130px;            height: 130px;            border-radius: 25%;            float: left;            margin-right: 50px;        }                  .square {            width: 130px;            height: 130px;            border-radius: 0%;            float: left;            margin-right: 50px;        }                  #circle {            background-color: #196F3D;        }                  #rounded {            background-color: #5DADE2;        }                  #square {            background-color: #58D68D;        }    </style>  </head>  <body>      <div class="circle" id="circle"></div>      <div class="rounded" id="rounded"></div>      <div class="square" id="square"></div>      <script type="text/javascript">        document.getElementById("circle").onclick = function() {              document.getElementById("circle").style.display = "none";          }          document.getElementById("rounded").onclick = function() {              document.getElementById("rounded").style.display = "none";          }          document.getElementById("square").onclick = function() {              document.getElementById("square").style.display = "none";          }    </script>  </body>  </html>
Output:Output of the above code is:
Square shape will get disappear after clicking on it:
Similarly Rounded shape will get disappear after clicking on it:
Similarly, Circle shape will get disappear after clicking on it.
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
HTML-Misc
JavaScript-Misc
HTML
JavaScript
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
How to calculate the number of days between two dates in javascript?
Differences between Functional Components and Class Components in React