Subhash's Guide: Expandable Menus

• WebBuilder Sites

  www.indiwiz.com/web/
  www.builder.com
  

• Clipart Sites

  www.clipsahoy.com
  www.abcgiant.com
  

If you click on the 'WebBuilder Sites' or 'Clipart Sites' their sub-menu is displayed. In this article I will discuss how to create this type of menus.

The HTML code is given below:

Line No.	Code
1	<ul>
2	<li><a href="javascript:expandIt(document.getElementById('listOne'))">WebBuilder Sites</a>
3	<p id="listOne" style="display:none">
4	<a href="http://www.indiwiz.com/web/">www.indiwiz.com/web/</a><br/>
5	<a href="http://www.builder.com/">www.builder.com</a><br/>
6	</p>
7	<li><a href="javascript:expandIt(document.getElementById('listTwo'))">Clipart Sites</a>
8	<p id="listTwo" style="display:none">
9	<a href="http://www.clipsahoy.com">www.clipsahoy.com</a><br/>
10	<a href="http://www.abcgiant.com">www.abcgiant.com</a><br/>
11	</p>
12	</ul>

As you can see the whole code is placed within an unordered list. There are two list items: 'WebBuilder Sites'(line 2) & 'Clipart Sites'(line 7). Within each of the list item there is a paragraph. The first paragraph starts at line 3 and ends at 6. The id of it is 'listOne'. These paragraphs have been made invisible using style parameters 'display:none'(line 3 & 8).

Now let us look at the list items in detail. The list items(line 2 & 7) are wrapped in an anchor tag. The URL of the anchor tags are javascript:expandIt(document.getElementById('listOne')) & javascript:expandIt(document.getElementById('listTwo')) respectively. Thus clicking on these items actually call the JavaScript function expandIt(). The first list item passes the argument listOne Element and the second one listTwo Element (from the DOM tree) to the said function. So isn't it time that we looked at this JavaScript function?

Line No.	Code
1	<script language="JavaScript">
2	<!--
3	function expandIt(getIt){
4	getIt.style.display=(getIt.style.display=="none")?"":"none";
5	}
6	//-->
7	</script>

When the user clicks on the 'WebBuilder Sites' the function expandIt() is triggered. The argument passed is 'listOne', the id of the invisible paragraph. This fact is stored in the variable 'getIt'. Now comes the action part. The line 4 of the program checks whether the layer(paragraph) with id 'listOne' is visible or not. If it is not visible, then the function makes it visible or vice versa. For optimized code we have used the ternary operator instead of the if..else structure. The syntax of ternary operator is:
test ? true-result : false-result;
So the statement(line 4):
(getIt.style.display=="none")?"":"none";
checks whether the display of 'listOne'(getIt) is set to none. If the test returns a true value, the style parameter of display is set to NULL(""), otherwise the NULL value is replaced by 'none'.