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>
to
<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 if(sectionArray[0]) { 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"); } } } //--> </script> 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 </div>

 

TOP