DHTML : Interactive Outlines - 15 Nov 2001

Description This sample shows how to build an interactive outline that expands and collapses. Click closed folders to open them, and click open folders to close them. The items automatically expand and collapse.

More Details
No matter how many items you would like to include in your outline, or what those items contain, the code to collapse and expand items never has to change. A simple naming convention is used to allow this. In the example above, all of the images that are used to control the collapsing and expanding of elements are given the class "Outline." The element that will be hidden or shown when its associated image is clicked has a name consisting of the ID of its associated images, followed by a "d," for example, if the Image ID is "image 1," the outline element would have an ID of "image1d." So, when a click occurs, the code checks to see if the source of the click is an object with class = Outline and, if so, it gets the element that has an ID equal to the clicked image's ID+"d." That element's display status is then toggled.

Browser/Platform Compatibility
Dynamic HTML is supported in Microsoft Internet Explorer 4 and greater. The ability to collapse and expand the outline dynamically is not supported by other browsers. Other browsers do not understand the inline style applied to the elements causing them to be initially hidden, the outline will show up fully expanded.

Usage
As explained above, the code to control the outline does not have to change based on the contents of the outline. Simply take the script from this page, use the naming convention described above, and you will have instant outlines.

Complete Article