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.

PLAIN TEXT
CODE:
  1. <ul id="collapsibleList">
  2. <li>
  3. <script type="text/javascript">document.writeln('<img id="iBMImage" src="closed.png" width="15" height="8" alt="Open list" onClick="toggle(\'iBMImage\',\'iBMList\');"/>');
  4. </script> IBM </li>
  5. </ul><ul id="iBMList">
  6. <li>80x86</li>
  7. <li>Itanium</li>
  8. </ul>
  9. <li>
  10. <script type="text/javascript">document.writeln('<img id="motorolaImage" src="closed.png" width="15" height="8" alt="Open list" onClick="toggle(\'motorolaImage\',\'motorolaList\');"/>');
  11. </script> Motorola </li>
  12. <ul id="motorolaList"> <li>680x0</li>
  13. <li>PowerPC</li> </ul>
  14.  
  15. <script type="text/javascript"> document.getElementById('collapsibleList').style.listStyle="none"; // remove list markers document.getElementById('iBMList').style.display="none"; // collapse list document.getElementById('motorolaList').style.display="none"; // collapse list // this function toggles the status of a list function toggle(image,list){
  16. var listElementStyle=document.getElementById(list).style; if (listElementStyle.display=="none"){ listElementStyle.display="block"; document.getElementById(image).src="open.png"; document.getElementById(image).alt="Close list";
  17. }
  18. else{
  19. listElementStyle.display="none"; document.getElementById(image).src="closed.png"; document.getElementById(image).alt="Open list";
  20. }
  21. }
  22. </script>