Here’s a quick web design tip – how to hide and reveal a div element on a click.
 
To do this we use getElementById to find the required div and set the visibility to either inline or none.
 
We do this in a function we’re creating called showdiv – which itself is triggered by a button click.
 
Here’s the code:
 
   1:  <html>
   2:  <head>
   3:  <title>How To Hide A div element</title>
   4:  <style type="text/css">
   5:  div {
   6:  position: absolute;
   7:  top: 80px;
   8:  left: 15px;
   9:  width: 130px;
  10:  padding: 10px;
  11:  color: white;
  12:  border: #000000 2px;
  13:  background-color: #FF0000;
  14:  display: none;
  15:  }
  16:  </style>
  17:   
  18:  <script language="JavaScript">
  19:  function showdiv(id, visibility) {
  20:  document.getElementById(id).style.display = visibility;
  21:  }
  22:  </script>
  23:   
  24:  </head>
  25:  <body >
  26:   
  27:  <input type=button name=type value='Show Div' 
  28:              onclick="showdiv('hidden-div', 'inline');";>
  29:   
  30:  <input type=button name=type value='Hide Div' 
  31:              onclick="showdiv('hidden-div', 'none');";> 
  32:   
  33:  <div id="hidden-div">Hidden Div Element</div>
  34:   
  35:  </body>
  36:  </html>
 
 
And here’s a link to a demo page