Web-centric Computing

Some Example Code

Expanding/Contracting Nested Lists

Description

The original version of this example was written by Karl Nelson. (Details below).

The JavaScript alters to DOM tree of the document. Every open-able list item is an anchor (<a>) with an image (img) as the anchor text. Such as:

<ul class="closed">
  <li id="item1" 
     ><a onclick="toggle('item1');" onkeypress="toggle('item1');"
        ><img src="opened.gif"
           alt="" <!-- image is useless without visual browser -->
           id="img_item1"
           style="height:2ex;width:2ex"
         /></a>Item 1
     <ul id="ul_item1" class="open">
       <li id="item1_1">Item 1.1</li>
       <li id="item1_2">Item 1.2</li>
     </ul>
  </li>
</ul>

See Also


http://www.cs.dal.ca/~jamie/course/CS/3172/examples/JS/nested_lists/nested_lists.html
Version:
16 December 2003
Course
CS 3172
Prof:
J. Blustein <jamie@cs.dal.ca>
This webpage uses valid XHTML 1.0;
 This webpage uses valid cascading style sheets.

Adapted from Version .8, 9/25/03 of Expanding Nested Lists example by Karl Nelson <karlnelson@earthlink.net>.