Sandeep's Nook: JavaScript Page

Collapsible Text with Open All/Close All Link

Given below is an example of the Collapsible Text with Open/Close All Link script. Just click the three headers "Example & Explanation", "Compatibility" and "Notes" to see the script work.
Besides the Open All/Close All Link the + symbol will change to - when the hidden text is revealed.

[ Open All | Close All ]

1] Example & Explanation:

This is the hidden text that was revealed when the header was clicked. Such hidden text is generally related to the main header which opens them. You can add any number of collapsible headers. Clicking on the header when the text is seen hides the text. Additionally if a header is clicked it will automatically close any open text related to any other header while opening its own hidden text.

2] Compatibility:

This script works with all the newer versions of browsers like IE5+, NS6, Opera and Firefox.
This script does not work with older browsers like NSv4.x but degrades very well.

3] Notes:

This is one of the most compact scripts of this nature that you can find in any JavaScript archives.

Note: It should be noted that when users choose to print the page all the hidden text will automatically be made visible in the printed document.

Author: Sandeep Gangadharan
Home Page: http://www.sivamdesign.com/home/

The script is given below:

This goes in the HEAD of the html file:

<script language="JavaScript" type="text/javascript">


<!--
if (document.getElementById) {
 document.write('<style type="text/css">.texter {display:none; border-left:white 20px solid; color:#404040; font-family:verdana,arial,helvetica,sans-serif; font-size:9pt} @media print {.texter {display:block;}}</style>') }

var divNum = new Array("a1","a2","a3");  // at the left you should add a1, a2 etc. for each header you wish to include
                                          // so if you want 4 headers you should add a1, a2, a3, a4 in the format shown
                                          // enclosed in double quotes
function openClose(theID) {
 for(var i=0; i < divNum.length; i++) {
  if (divNum[i] == theID) {
   if (document.getElementById(divNum[i]).style.display == "block") { document.getElementById(divNum[i]).style.display = "none" }
   else { document.getElementById(divNum[i]).style.display = "block" }
  }
  else { document.getElementById(divNum[i]).style.display = "none"; }
 }
}

function openAll() {
 for(var i=0; i < divNum.length; i++) {
   document.getElementById(divNum[i]).style.display = "block";
 }
}

function closeAll() {
 for(var i=0; i < divNum.length; i++) {
   document.getElementById(divNum[i]).style.display = "none";
 }
}
// -->
</script>

This goes in the BODY of the html file:

<span style="cursor:hand; cursor:pointer" onClick="openAll()">[ Open All</span> | <span style="cursor:hand; cursor:pointer" onClick="closeAll()">Close All ]</span><br /><br />

<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer; font-family:verdana,arial,helvetica,sans-serif; font-size:10pt"><b>1] Example & Explanation:</b></div>
 <div id="a1" class="texter">
   This is the hidden text that was revealed when the header was clicked. Such hidden text is generally
   related to the main header which opens them. You can add any number of collapsible headers. Clicking on
   the header when the text is seen hides the text. Additionally if a header is clicked it will automatically
   close any open text related to any other header while opening its own hidden text.<br /><br />
 </div>

<div onClick="openClose('a2')" style="cursor:hand; cursor:pointer; font-family:verdana,arial,helvetica,sans-serif; font-size:10pt"><b>2] Compatibility:</b></div>
 <div id="a2" class="texter">
   This script works with all the newer versions of browsers like IE5+, NS6, Opera and Firefox.<br />
   This script does not work with older browsers like NSv4.x but degrades very well.<br /><br />
 </div>

<div onClick="openClose('a3')" style="cursor:hand; cursor:pointer; font-family:verdana,arial,helvetica,sans-serif; font-size:10pt"><b>3] Notes:</b></div>
 <div id="a3" class="texter">
   This is one of the most compact scripts of this nature that you can find in any JavaScript archives.<br /><br />
 </div>