Inside Technique : Outlining Lists
By Scott Isaacs

Create lists that can automatically be expanded and collapsed.

Below is the part and chapter outline for Inside Dynamic HTML. The list is customized using style sheets.

Inside Dynamic HTML

• HTML and Scripting
  • Overview of HTML and CSS
  • Fundamentals of HTML Scripting
  • Dynamic HTML Event Model
  • Programming the Browser Window
  • Window and Frame Management
• Document Structure
  • The HTML Document
  • Programming Element Collections
  • Introduction to Programming Elements
  • Programming Miscellaneous Elements
  • Programming Forms and Intrinsic Controls
• Dynamic Styles and Animation
  • Dynamic Styles
  • Dynamic Positioning
• Dynamic Content
  • Dynamic Contents
  • Programming the Text Range

Outlining Code

  // Source Code for Outlining
  function checkParent(src, dest) {
    // Search for a specific parent of the current element
    while (src!=null) {
      if (src.tagName == dest) return src;
      src = src.parentElement;
    }
    return null;
  }

  function outline() {     
    // Expand or collapse if a list item is clicked.
    var open = event.srcElement;
    // Make sure clicked inside an LI. This test allows rich HTML inside lists.
    var el = checkParent(open, "LI");
    if (null!=el) {
      var pos = el.sourceIndex+1
      // Search for a nested list
      while (el.contains(document.all[pos])) {
        if ("UL"==document.all[pos].tagName) break;
        pos++
      }
    } else return;
    el = document.all[pos];
    if ("UL"==el.tagName) {
      // Expand or Collapse nested list
      if (""==el.style.display) {
        el.style.display = "block"
      }
      else
      {
        el.style.display = ""
      }
    }
    event.cancelBubble = true;
  }
  document.onclick = outline;

Outlining Style Sheet

The following style sheet is used to control the appearance of the outline. Notice that the nested list is defined to render without a bullet. Customizing the style sheet customizes your expandable list.

  UL {cursor: hand; 
      color: navy; 
      list-style-type: upper-roman}
  UL UL {display: none; 
         cursor: text; 
         color: black; 
         list-style-type: none;
         margin-left: 5pt}

Netscape Navigator 4.0 Work-around

Netscape Navigator 4.0 interprets the rule "display: none" to hide the nested list, but does not support Dynamic HTML for expanding the list. Below is a 1-line work-around that uses JavaScript Accessible Style Sheets (JASS) to reenable the display of the list:

Netscape also interprets margins incorrectly on nested lists which may cause the list to appear too indented (notice the margin-left adjustment in the style sheet above). Additional rules can be added to adjust the margins. This code is only evaluated in Netscape Navigator 4.0.

  <STYLE TYPE="text/javascript">
    contextual(tags.UL, tags.UL).display = "block"
  </STYLE>

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.