Contractible Header Menu
This script from Dynamic Drive creates a contractible header menu.
What does that mean?
A number of folders - initially hidden from view - are described only by their headers.
When you click on one of the headers, the entire menu expands, and the contents of the associated folder are displayed.
Click again, the folder is hidden once more, and the menu contracts.
Handy for placing numerous categories on a page, without showing the contents until the header is clicked.
Since the header folders are housed inside span containers, you can have anything inside:
links
graphics
embedded plugins
any type of html content
And the script is cross-browser compatible: works with IE4+, NS4.x and NS 6
Paste this code in the head section of your page:
And add this to your body section:
How It Works
Each of the expanded sections are housed in span containers, which are initially not displayed:
<span style="display:none" style=&{head};>
This is content under Header 1</span>
Whenever a header is clicked, the function expandit() is called:
<h3 style="cursor:hand" onClick="expandit(this)">Header 1</h3>
First a check is made to determine the browser being used:
folder=ns6?curobj.nextSibling.nextSibling.style:
document.all[curobj.sourceIndex+1].style
If it's NS6, the nextSibling method is used.
NS6 adheres to the DOM (Document Object Model) standard of addressing page elements, where:
nextSibling is the span container immediately following the header
nextSibling.nextSibling is the contents of that container
Otherwise the document.all method is used, where:
sourceIndex+1 refers to the contents of the associated span container
The variable folder points to the header's associated span container.
On clicking the header, the container is displayed, and the menu expands.
If the span container is already visible, clicking the header hides it again, and the menu contracts:
if (folder.display=="none")
folder.display=""
else
folder.display="none"
Regarding the span containers, their style characteristics are set by the variable head:
var head="display:''"
... and referenced in this way:
<span style="display:none" style=&{head};>
Try It Out
Click on any header to see the contents.
For the Music example, you'll need to have a MIDI plugin installed:
Some Text
Place whatever text you like here ....
Some Scripts
Delayed Alert Box
Using Confirm Boxes
Using Prompt Boxes
Using Prompts For Passwords
Some Graphics
Some Music
© 2001 CyberSchool
