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

Start by setting up the lists


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

#menulink {

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.


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

Create CSS collapsible menus