Hide or show elements in HTML using display property

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";

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.

My Personal Notes

Recommended Posts: