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>

• We must use an anchor instead of a span so that the onclick and onkeypress events will be available on many browsers. (onclick is available in span too but not all browsers implement it.) The original version even included href="#" in an attempt to force browsers to treat the anchor as something that can be clicked.

• view source

• The JavaScript function toggle() changes the state of the two attributes:

  • <a class="closed" ><img src="closed.gif" /></a> to
  • <a class="open"   ><img src="opened.gif" /></a> and vice versa

• The CSS rules are

  • .open   { display: block; }, and
  • .closed { display: none; }

See Also

• JavaScript Form Input example for another example of how the DOM can be used in JavaScript
• CSS section in examples list

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>

;

.

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