Contractible Headers Script
Note: Last updated March 23rd, 04' (script based on Switch Content script).
Description: A script that makes selected headers in a page contractible. Contents such as text, graphics, tables etc can be hidden inside the header that will be revealed only when the header is clicked on.
What sets this script apart from most other you'll find are the following features:
- Works in both IE5+ and NS6+, and degrades fully with other browsers. In the later instances your content will appear normally.
- Extremely versatile. The script can be applied to content of all types on your webpage, such as <DIV>, <P>, <TABLE>s etc.
- New! Two expanding behaviors- specify whether only one header should be open at any one time, or that previously open header continue to be visible.
- Persistence feature. You can specify whether the script should remember the state of the header structure when the user navigates away to a different page. When enabled, returning to the page will cause the script to return the header to its last state (ie: third header expanded).
Demo:
+ Site Partners
Directions 
Step 1: Insert the below into the <head> section of your page:
Step 2: Finally, insert the below example HTML anywhere inside the <body> section of your page:
More information
This script works with virtually any content on your page to make them contractible. We deliberately made the HTML code in Step 2 very simple to illustrate the basic syntax required. The two steps required are:
1) Create the header that will expand a content when clicked on. Here's an example:
<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">
What is JavaScript?</h3>
The part in red is the ONLY required portion- everything else you can customize, from the header's style to even the tag used (ie: <img> instead of <h3>).
2) Specify the content that will be associated with the above and become expandable:
<div id="sc1" class="switchcontent"> JavaScript is a scripting language originally developed by Netscape..... </div>
Once again, the portion in red are required within the content. The ID attribute used above (ie: sc1) can be arbitrary, but MUST match the "sc1" specified within the header of step 1). This is so the header knows which content it should expand- it's not physic you know! Now, feel free to swap the <DIV> tag used to surround your content with a different tag, such as <span>, <p> etc.
One final thought. When the page first loads, by default all of the participating content are contracted until the user starts clicking on the headers. If you wish to make a particular content be visible from the start, you can use the CSS "display" property to accomplish this:
<div id="sc1" class="switchcontent" style="display:block"> " </div>
And that's it. As you can see, the script is extremely adaptable, and you shouldn't' have a problem integrating it with all sorts of different content on your page.
Do enjoy!