Working with Document Nodes and Styles - HTML, CSS, and Dynamic HTML - page 999

Hiding and Displaying the Nested Lists
The next action of the expandCollapse() function will be to alternately hide and display
the nested list associated with each plus/minus box. As shown in Figure 14-49, each
nested list is placed two siblings away from the plus/minus box. Thus, you can reference
each nested list using the following expression:

var nestedList = this.nextSibling.nextSibling;

Figure 14-49 location of the nested list relative to the plus/minus box

OL

LI LI

nextSibling nextSibling

SPAN A OL

"--" "Amendments"

LI LI

A A

"I. Freedom of
Expression"

"II. Right to
Bear Arms"

To hide the nestedList object, you'll apply the style

nestedList.style.display = “none”;
and to redisplay the object, you'll use

nestedList.style.display = “”;
Note that if you do not specify an inline display style for the object, browsers will
apply the default style from either an external style sheet or their own style sheets.
You'll add commands to the expandCollapse() function to toggle the display style now.

To expand and collapse the nested lists in the table of contents:

◗ 1. Return to the toc.js file in your text editor.

◗

2. Scroll down to the expandCollapse() function, and then add the following state-
ments at the start of the function:

/* Reference of the nested list that should be hidden
or displayed */
var nestedList = this.nextSibling.nextSibling;

◗ 3. Add the following statement at the end of the first if condition:

nestedList.style.display = “none”;

◗ 4. Add the following statement at the end of the second if condition:

nestedList.style.display = “”;

Figure 14-50 highlights the revised code in the function.