Sandeep's Nook: JavaScript Page

Collapsible Text with Memory

Given below is an example of the Collapsible Text with Memory script. Just click the three headers "Example & Explanation", "Compatibility" and "Notes" to see the script work. To test the memory function of this script just click any of the headers to open the hidden text. Then click this link that will take you back to the page from where you came here. When you click the link again to come to this page you shall see the same collapsible text open.

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. If a header is clicked it will automatically close any open text related to any other header while opening its own hidden text. Additionaly this script remembers whether any of the collapsible text topics was open if the users were to go to another page and come back to page containing the collapsible 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:


This goes in the BODY of the html file: