Home / code

Show and hide part of a page

Writer: Christophe Wolfs
Published: 22 April 2008

With this little script you can show and hide part of a webpage.
This can be very handy to put a lot of information on a screen without overloading it with data.

If you put multiple parts on one page name_of_the_part must be different for every part.
If you want it to show when you load the page, change :
<DIV ID="name_of_the_part" style="display=none>
<DIV ID="name_of_the_part" style="display=block>

Put the following in the head-section. 
<script LANGUAGE="JavaScript" TYPE="text/javascript">
  function Toggle(sectionArray) 
        // scare off underqualified browsers
          for(var i=0; i < sectionArray.length; i++)
                if(sectionArray[i].style.display == "none") (sectionArray[i].style.display = "block");
                else (sectionArray[i].style.display = "none");

A link in the body where they click to show or hide : 
<a href="#" OnClick="var testArray = new Array(document.all.name_of_the_part);Toggle(testArray);">Show</a>

And then the part that has to be hidden : 
<DIV ID="name_of_the_part" style="display=none">
Hide or show part