Hide and show a div

Hiding and showing a div in HTML is really simple. In this tutorial I will show you how to do that using only JavaScript.
In this example, I am hiding and showing all three divs using only JavaScript. Click with your mouse on one of the text containers below to see the effect

DEMO

Spider man1 Spider man1

Spider man2 Spider man2

Spider man3 Spider man3

HTML

<div align="center"><h1>Hide and show a div</h1></div>

<table align="center" width="30%"> <tr>
<td height="500px" >   <a id="myHeader1-2" href="javascript:showonlyonev2('newboxes1-2');" >Spider man1</a>
        <div class="newboxes-2" id="newboxes1-2" >
         <h1>Spider man1</h1>
         <img src="img3.jpg" width="100px" height="100px" /></div></td>
         <td><a id="myHeader2-2" href="javascript:showonlyonev2('newboxes2-2');" >Spider man2</a>
         </div>
         <div class="newboxes-2" id="newboxes2-2" style=" display: none;padding: 5px;">
          <h1>Spider man2</h1>
         <img src="img2.jpg" width="100px" height="100px" /></div></td> 
         <td>
         <div><a id="myHeader2-3" href="javascript:showonlyonev2('newboxes2-3');" >Spider man3</a>
         </div>
         <div class="newboxes-2" id="newboxes2-3" style=" display: none;padding: 5px;">
          <h1>Spider man3</h1>
         <img src="img1.png" width="100px" height="100px" /></div></td> </tr></table>

javascript

  <script type="text/javascript">
function showonlyonev2(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
      for(var x=0; x<newboxes.length; x++) {
            name = newboxes[x].getAttribute("class");
            if (name == 'newboxes-2') {
                  if (newboxes[x].id == thechosenone) {
                        if (newboxes[x].style.display == 'block') {
                              newboxes[x].style.display = 'none';
                        }
                        else {
                              newboxes[x].style.display = 'block';
                        }
                  }else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}
</script>

OutPut

 

DEMO