HTML and CSS Reference
In-Depth Information
To insert the expandCollapseDoc() function:
◗
1.
Return to the
toc.js
file in your text editor.
◗
2.
At the bottom of the file, insert the following code, as shown in Figure 14-53:
function expandCollapseDoc() {
var displayStatus = “”;
var source = document.getElementById(“doc”);
headings = [“H1”, “H2”, “H3”, “H4”, “H5”, “H6”];
/* Loop through every page element in the source document */
for (var n = source.firstChild; n != null; n = n.nextSibling) {
if (headings.indexOf(n.nodeName) != -1) {
/* Determine the display status of the matching
TOC list item */
}
if (n.nodeType == 1) {
/* Set the display status only if the node represents
a page element */
}
}
}
Figure 14-53
inserting the expandcollapsedoc() function
◗
3.
Save your changes to the file.
Next, you need to determine whether the corresponding entry in the table of
contents is displayed. The challenge is that the display status of an object cannot be
determined by looking at its display style alone; under CSS, display styles are inherited
from objects higher up in the hierarchy. The only way to determine whether an object
is hidden is to move up the object hierarchy, testing each parent of the object until you
arrive at the
body
element itself. If any one of those parent objects is hidden, then the
