Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Contractible Headers Script
Last updated: March 23rd, 04' Author:
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:
+ Featured Script
Flashing links script- The Flashing link script has become popular as an easy way to draw attention to important links on your page. Just updated for NS6/Opera7 plus a more efficient algorithm.
+ Link to Dynamic Drive!
+ Site Partners
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:
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.
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.