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:

The script is given below:

This goes in the HEAD of the html file:

This goes in the BODY of the html file: