Completing a Bulleted Menu Of Links

We will now talk about the “expandOrCollapse(leftIDpart, rightIDpart)” function. This function is called by the “splitID(ID)” function we discussed above. The purpose of the “expandOrCollapse(leftIDpart, rightIDpart)” function is to expand or collapse a list item; that is, it is to display or remove a sub list. The function without its inner-most blocks, but with its global variables, is as follows:

//boolean variables to ensure that expandOrCollapse() does not respond more than once for a click.

var SndLBullet = false;

var timesToIgnore = 0; //no. of times to ignore the click event from lowest level.

function expandOrCollapse(leftIDpart, rightIDpart)

{

//form the ID of UL element

ULID = "UL_" + rightIDpart + "1";

//form the ID of LI element

LIID = leftIDpart + "_"+ rightIDpart;

if (timesToIgnore == 0)

{

if (rightIDpart.length == 1)

{//to expand or collapse UL-11, UL_21, or UL_31

if (SndLBullet == false)

{

if (document.getElementById(ULID).style.display == "none")

//display or remove second level sub-list

}

//allow the above code to be executed if second level list is not clicked.

SndLBullet = false;

}

else if (rightIDpart.length == 2)

{//to expand or collapse UL-111, UL_121, UL_131, UL-211, UL_221, UL_231, UL-311, UL_321 and UL_331

SndLBullet = true;

if (document.getElementById(ULID).style.display == "none")

//display or remove third level sub-list

}

}

//do not act if bottom-most level link is clicked

if (timesToIgnore != 0)

timesToIgnore--;

}

This function receives as arguments the left side of the sent ID as the first argument. It receives the right side of the same ID as the second argument. The underscore of the ID is not part of either argument.

If you look at the ID structure above, you will notice that the number part of the UL element (sub-list) below an expandable LI element (not the lowest level) is the same as the number part of the LI element except that 1 (one) is attached to the end.

So when the ID of an expandable LI is sent, you can develop the ID of the corresponding sub-list (UL) by attaching the right part of the LI id and 1 to “UL_.” The first statement of the expandOrCollapse() function forms the corresponding UL id as follows:

ULID = "UL_" + rightIDpart + "1";

Only expandable LI elements call the expandOrCollapse() function (through the splitID(ID) function with their split IDs). So the first argument of the expandOrCollapse() function, which is the left part of an LI element’s ID, will always be “LI”. The second argument is the number part of the LI id. The second statement of the expandOrCollapse() function re-forms the LI element’s ID as follows:

LIID = leftIDpart + "_"+ rightIDpart;