HTML and CSS Reference
In-Depth Information
Expanding and Collapsing a Document
Norene reviews your table of contents application. She has seen other lists in which the
nested entries can be alternately hidden or displayed by clicking a plus/minus box. In a
plus/minus box , a + symbol in the box indicates that content is hidden and a - symbol
indicates that all the items are displayed. As Figure 14-41 illustrates, clicking the + box
reveals the hidden content and clicking the - box hides it.
Figure 14-41
using a plus/minus box to expand and collapse the list
clicking the
plus/minus box
expands the
nested list
clicking the
plus/minus box
again collapses
the list
Norene wants you to add this feature to the table of contents. She also wants the
contents of the source document to mimic the appearance of the table of contents so that
as items are hidden in the table of contents, they are also hidden within the document.
Creating this kind of dynamic content involves several of the tools and techniques you've
learned in previous tutorials, including working with event objects and object styles.
Creating a Plus/Minus Box
First, you'll create the element node for the following HTML fragment:
<span>-</span>
Initially, the plus/minus box will display the - symbol because the TOC will open with
all list items displayed to users. The following commands create the plus/minus box:
var plusMinusBox = document.createElement(“span”);
plusMinusBox.innerHTML = “-”;
You'll add this node to the table of contents app now. Because it will be placed in front
of a nested list, you'll include the code within the if condition that creates and appends
a nested list to the TOC.
To create the plus/minus box:
1. Return to the toc.js file in your text editor.
2. Scroll down to the createList() function. Within the if condition used when the
nodeLevel variable is greater than the prevLevel variable, insert the following
code as shown in Figure 14-42:
/* Create a plus-minus box */
var plusMinusBox = document.createElement(“span”);
plusMinusBox.innerHTML = “-”;
Search WWH ::




Custom Search