Press "Enter" to skip to content

Javascript Collapsible Lists

Javascript and DHTML can be used to make collapsible and expandable HTML lists that degrade cleanly (that is, are still usable for visitors who don’t have Javascript-enabled web browsers).
Example

This has been tested in Opera, Mozilla (Navigator) and Internet Explorer. Clicking on the arrows expands or collapses sections of the list:

The code

You need to create images called closed.png and open.png to be used for collapsed and expanded lists respectively. When adding more lists, the id values for the img and ul elements must be changed, and the parameters in the call to toggle() in the image’s onClick value must be changed to these ids.

[code]

  • IBM
  • 80×86
  • Itanium
  • Motorola
    • 680×0
    • PowerPC


    [/code]