Expanding Nested Lists

• Item 1
  • Item 1.1
  • Item 1.2
• Item 2
  • Item 2.1
    • Item 2.1.1
    • Item 2.1.2
      • Item 2.1.2.1
      • Item 2.1.2.2
    • Item 2.1.3
  • Item 2.2
• Item 3
  • Item 3.1
  • Item 3.2
  • Item 3.3
  • Item 3.4
  • Item 3.5

This technique uses a nested list, some simple javascript, and CSS to create a expanding "tree" effect. It seems to work fairly well, but there are some issues, as I discuss below. Mostly, I haven't had the time to explore all of the issues.

View source to see the code.

Feel free to send feedback to karlnelson@earthlink.net.

Issues

Horizontal Spacing of Text. Ideally, you'd want the first character in each level to line up. This could pretty easily be achieved by using a spacer image (either transparent or a circle) for leaf nodes. Some CSS might work, too.

Vertical Spacing of Images. I haven't tried very hard yet, but I haven't been able to get the arrows to line up in the middle of the text across all browsers. This is probably a function, in part, of the image size and the text size.

Accessibility. I don't have alt attributes set, but I imagine it wouldn't be too hard to set up some javascript to change the alts dynamically. I have no idea what this would look like in a screen reader or other piece of accessible technology.

Version .8, 9/25/03, Karl Nelson

Update (11/6/03): I found a The List posting from last year that covers pretty much the same ground.