Recipe 3.7 Creating Collapsible Menus

Problem

You want to hide a set of links and give the user a way to reveal those links when needed. For example, rather than two bullet lists of links, hide one (as shown in Figure 3-6) and let the user reveal it by clicking on a + sign as in Figure 3-7.

Figure 3-6. Preventing the second set of links from displaying

Figure 3-7. The links displayed when the link on the heading is clicked

Solution

First, set up the HTML links to be collapsible with an id attribute in the ul element:

<h5>Interesting Links (+/-)</h5>

<ul id="menulink">

 <li><a href="http://www.ora.com/">O'Reilly</a></li>

 <li><a href="http://www.slashdot.org/">Slashdot</a></li>         

 <li><a href="http://www.apple.com/">Apple</a></li>

 <li><a href="http://www.microsoft.com/">Microsoft</a></li>

 <li><a href="http://www.mozilla.org/">Mozilla</a></li> 

</ul>

Then create a CSS rule to prevent the second set of links from displaying when the page is first loaded:

#menulink {

 display: none;

}

Now add the following JavaScript function that toggles the list of links by swapping the value of display from block to none, or vice versa:

function kadabra(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;

 }

}

Insert an anchor element with a JavaScript onclick event around the heading. When a user clicks the link, the click triggers the JavaScript function:

<h5><a href="#" onclick="return kadabra('menulink');">

Interesting Links (+/-)</a></h5>

Discussion

The JavaScript in this function uses getElementbyId to toggle the display of the list of menu links. This technique can be scaled to show multiple menus or portions of a web document without adding additional lines of JavaScript:

<p>Are you sure you want to know the truth? If so, 

follow <a href="#" onclick="return kadabra('spoiler'); ">this 

link.</a></p>

<p id="spoiler">Darth Vadar was Luke's father!</p>

Note that this technique works in Netscape Navigator 6+, Opera 7.5+, Internet Explorer for Windows 5+, and Safari.