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:

  1. Create some div and assign them an id or class and then add styling to it.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div class="circle" id="circle"></div>
    <div class="rounded" id="rounded"></div>
    <div class="square" id="square"></div>

    chevron_right

    
    

  2. 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  3. Background-color will set the background color of the div.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #circle {
               background-color: #196F3D;
           }
             
    #rounded {
               background-color: #5DADE2;
           }
             
    #square {
               background-color: #58D68D;
           }

    chevron_right

    
    

  4. The document.getElementById will select the div with given id.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script type="text/javascript">
            document.getElementById("circle").onclick = function()

    chevron_right

    
    

  5. The style.display = "none" will make it disappear when clicked on div.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .style.display = "none";

    chevron_right

    
    

Implementation of style.display property:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.