How to Create a Dynamic Table of Contents

The ability to hide and show information on demand is one of the great innovations in Dynamic HTML. Scarce screen real estate makes getting the big picture difficult. That is, it does unless contents lists with headings that reflect the hierarchy of topics can be expanded and collapsed at will. The example provided in this article demonstrates how to create an expandable table of contents, using code that you can reuse without modification. Moreover, the code degrades well because browsers that do not support the cascading style sheets (CSS) attributes used simply display the whole contents list.

Make an HTML list that represents your table of contents.

Create an HTML list, using UL, LI, and anchors within the individual list elements.

<HTML>
<BODY>
<UL>Part I: Dynamic HTML Text Features</A>
  <LI><A HREF="about:blank.htm">List Item
  <LI><A HREF="about:blank.htm">List Item
  <LI><A HREF="about:blank.htm">List Item
</UL>
</BODY>
</HTML>

Signal that more information is available.
Without some indication, the user will not know that subheadings exist. Provide such user interface cues as a down-arrow icon next to the top-level headings. Or use Dynamic HTML to activate UL tag text and transform the cursor into a hand when the mouse pointer passes over it. The latter effect can be created in a central location by using CSS rules. The following example adds style definitions for unordered lists to those already specified for the BODY selector in the tutorial How to Manipulate Text Effects in Response to Mouse Events.
```
<STYLE>
BODY   { background-color: black;color: gold; font: 24pt sans-serif; }
UL     { cursor: hand; }
</STYLE>
```
Define the style rules for hiding and displaying list items.
Now it's time to use the full power of CSS selectors. Only simple selectors have been used so far—that is, selectors that apply to a single tag and/or attribute (UL.ActivateTextEffect). The following example makes extensive use of contextual selectors. A contextual selector is applied to elements based on their position in the document structure and consists of multiple simple selectors.
```
<STYLE>
BODY   { background-color: black;color: gold; font: 24pt sans-serif; }
UL     { cursor: hand; }
UL LI                { display: none;font: 18pt;list-style: square; }
UL.showList LI       { display: block; }
.defaultStyles UL    { color: gold; }
UL.defaultStyles LI  { display: none; }
</STYLE>
```
This bulleted list explains each selector shown in the above example.
- BODY and UL: Both are simple selectors. Each applies a style declaration to an element type.
- UL LI: This contextual selector matches only list items within unnumbered lists.
- UL.showList LI: This contextual selector applies only to LI elements within unordered lists of class showList.
- defaultStyles UL: This contextual selector matches only elements of type UL and of class defaultStyles.
- UL.defaultStyles LI: This contextual selector applies only to LI elements contained within UL elements of class defaultStyles.
Add inline events.
Include events for displaying and hiding the list. First create an onclick event that assigns the showList CSS selector to all UL tags. Next define an ondblclick event that assigns the defaultStyles selector to all UL tags. Be sure to let the user know how to collapse the list, whether you use a separate event, as is modelled here, or write code that toggles the list display using a single event.
Create the onmouseover event to generate active text effects of the sort described in How to Manipulate Text Effects in Response to Mouse Events. The following example demonstrates a different way to achieve these effects. Instead of changing style sheets by reassigning the className property, style information is defined inline. In the onmouseover event, the new style is set inline through the Style object in the code "this.style.color='orange'". This technique involves manipulating style properties as opposed to style attributes.
Define the onselectstart event. This event is important because it allows you to control whether text can be selected. Users frequently click and drag or double-click the mouse when only a single click is called for, as in the case of expanding the contents list. These two mouse actions cause text to be selected, which indicates that it is editable. Coding the onselectstart event to return false prevents such a miscue by canceling the onselectstart event. The returnValue property of the event object is used in the following sample code.
```
<HTML>
<BODY>
<UL onclick = "this.className = 'showList';"
    ondblclick = "this.className = 'defaultStyles';"
    onmouseover = "this.style.color = 'orange';"
    onselectstart = "event.returnValue = false;">Part I: Dynamic HTML Text Features</A>
  <LI><A HREF="about:blank.htm">List Item
  <LI><A HREF="about:blank.htm">List Item
  <LI><A HREF="about:blank.htm">List Item
</UL>
</BODY>
</HTML>
```
If you want to keep your file compact, you might want to take advantage of event bubbling. Events fired off elements rise to the container level. To set up event bubbling, put the HTML table of contents into a container, such as a division. Remove all events from the UL tags. Include those same events in the DIV tag, and write code that executes the action on the object that originated the event. This time you will put the srcElement property of the event object to work. The current style definitions are specific to UL and LI tags. Other elements in the same container will not be affected, except by the onmouseover action. In this case, either use "event.cancelBubble" on the individual objects that should not receive the style assignment or else cancel bubbling on the UL onmouseover event and preserve the inline code. The criterion for choosing one over the other is which approach preserves succinct code.
```
<DIV onclick="event.srcElement.className='showList';"
    ondblclick="this.className='defaultStyles';"
    onmouseover="this.style.color='orange';"
</DIV>
```
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

For more information on dynamically changing CSS attributes, see the following information: