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 will select the <div> with given id. You should set the display to "none" so as to make it disappear when clicked on <div>:

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

Another example of hiding and showing div with JavaScript:

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

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:

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

When the user hovers over the <div>, it disappears, and the form is displayed.