Create CSS collapsible menus

You want to hide links in menus and then show them when they are clicked.

Start by setting up the lists

Links

• OracleHome

Then create a css rule to prevent the second set of links from displaying when the page is loaded.

#menulink {
display:none;
}

Now add the following javascript in the page

Function collapselist (zap) {
If (document.getElementById) {
Var abra = document.getElementById (zap).style;
If (abra.display == “block”) {
Abra.display=”none”; }
else {
Abra.display = “block”;
}
return false;
} else {
return true;
}
}

Now insert an anchor element with a javascript onclick event around the heading, so when a user clicks on a link the click triggers the javascript function.

Links

This technique works in Netscape, Opera 7.5+, IE 5+ and Safari.