Sandeep's Nook: JavaScript Page

Collapsible Text

Given below is an example of the Collapsible Text script. Just click the two headers "Example & Explanation" and "Notes" to see the script work.

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.

2] Notes:

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

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:

<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><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 texts are mostly
   related to the main header which opens them. You can add any number of collapsible headers.<br /><br />
 </div>

<div onClick="openClose('a2')" style="cursor:hand; cursor:pointer"><b>2] Notes:</b></div>
 <div id="a2" class="texter">
   This script works with all the newer versions of browsers like IE5+, NS6, Opera and also Firefox.<br />
   This script does not work with older browsers like NSv4.x but degrades very well.
 </div>