This script works with virtually any content on your page to make them expandable. The two steps required are:

1. Create the header that will expand a content when clicked on. Here's an example:

<h2 onClick="expandcontent('sc1')" ⇔

style="cursor:hand; cursor:pointer"> A Heading</h2>

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 <h2>).

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>

Only the portion in red is necessary. The ID attribute used above (ie: sc1) can be arbitrary, but must match the “sc1” specified within the header of step 1) so that the header knows which content it should expand. Now, feel free to swap the <DIV> tag used to surround your content with a different container tag, such as <span>, <p> etc.

When the page first loads, by default the participating content is contracted. The user has to click to expand it. To make any content visible from the start, use the CSS “display” property:

<div id="sc1" class="switchcontent" style="display:block"> " </div>

And that's it. The script is adaptable, and easily integrated into any apge.

You can use different symbols in your headers, depending on the contracted or expanded state of the DIV content. In the script of Step 1 are two variables, one for each symbol. HTML is supported, so you can specify a simple “+” and “-” symbol, use character codes, as we have here, ▲ and ▼, or use images: "<img src='a.gif'>" and "<img src='b.gif'>"

Having created your symbols, insert the code:

<span class="showstate"></span>

inside each of your header HTML (code of Step 2, as shown). The script does the rest!