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.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.