How to Hide and Show a <div>

If you don’t know how to hide and show a <div> element, you should definitely check this tutorial! Hiding and showing a <div> in HTML is quite an easy thing. You can do it with CSS or a small piece of JavaScript and jQuery codes.

The document.getElementById() method selects the <div> with the given id. Set the display property to "none" to hide it when clicked:

JavaScript: Hide a div using document.getElementById

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        float: left;
        margin-right: 50px;
      }      
      .parallelogram {
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        margin-left: 20px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
      }      
      .circle {
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
      }      
      .square {
        border-radius: 0%;
        -moz-border-radius: 0%;
        -webkit-border-radius: 0%;
      }      
      #parallelogram {
        background-color: #1c87c9;
      }      
      #circle {
        background-color: #8ebf42;
      }      
      #square {
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>
    <h2>Click on the figure</h2>
    <div class="parallelogram" id="parallelogram"></div>
    <div class="circle" id="circle"></div>
    <div class="square" id="square"></div>
    <script>
      document.getElementById("parallelogram").onclick = function() {
          document.getElementById("parallelogram").style.display = "none";
        }
      document.getElementById("circle").onclick = function() {
          document.getElementById("circle").style.display = "none";
        }
      document.getElementById("square").onclick = function() {
          document.getElementById("square").style.display = "none";
        }
    </script>
  </body>
</html>

Try it Yourself »

Another example of hiding and showing a <div> with JavaScript:

JavaScript: Toggle a div

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <style>
      .content {
        padding: 20px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <button type="button" class="toggle-btn">Toggle</button>
    <div class="content">Lorem Ipsum is simply dummy text.</div>
    <script>
      $(document).ready(function() {
          // Display alert message after toggle paragraphs
          $(".toggle-btn").click(function() {
              $(".content").toggle(2000, function() {
                  // Code to be executed
                  alert("The toggle effect is completed.");
                });
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

Now let’s see how you can hide and show your <div> element with pure CSS using the CSS :hover pseudo-class. Here’s the full code:

CSS: Show a nested element on hover

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      form {
        display: none;
      }
      .example:hover>form {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <div>Hover to show the form</div>
      <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" 
        onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=alexcican', 'popupwindow', 'scrollbars=yes,width=650,height=620');return true">
        <p>
          <input type="text" class="email_field" name="email" size="30" value="E-mail address" />
          <input type="hidden" value="alexcican" name="uri" />
          <input type="hidden" name="loc" value="en_US" />
          <input class="email_btn" name="submit" type="submit" value="Done"/>
        </p>
      </form>
    </div>
  </body>
</html>

Try it Yourself »

When the user hovers over the <div>, the nested form is displayed.