Show - hide
3. What is DHTML?
Right-click - 'select all' (ctrl-a) then copy (ctrl-c) and paste to 'HEAD' of your page.
Right-click - 'select all' (ctrl-a) then copy (ctrl-c) and paste to 'BODY' of your page.
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:
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:
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.
Behaviour can be modified at start of script ("var enablepersist" and
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.