Here follows a simple collapsible list created with the Change Property behavior and the CSS styles display:block, and display:none. Note that each list item is clickable, produces the proper cursor, and that clicking on one list item collapses the other two.

In this second example, the "collapse on click" feature has been removed. Once expanded, the sublist remains expanded until the page is refreshed.

This is all accomplished by using CSS and javascript. The CSS looks like this -

<style type="text/css">
<!--
#suba1, #suba2, #suba3,#subb1, #subb2, #subb3 {
display: none;
}
-->
</style>

And the code (for the second example) looks like this -

<ul>
  <li><a href="#" onclick="FP_changeProp(/*id*/'subb1',1,'style.display','block')">
      List Item 1</a>
   <gt;
     <li>Subb1-1</li>
     <li>Subb1-2</li>
   </ul>
 </li>
 <li><a href="#" onclick="FP_changeProp(/*id*/'subb2',1,'style.display','block')">
      List Item 2</a>
   <ul id="subb2">
     <li>Subb2-1</li>
     <li>Subb2-2</li>
     <li>Subb2-3</li>
   </ul>
 </li>
 <li><a href="#" onclick="FP_changeProp(/*id*/'subb3',1,'style.display','block')">
      List Item 3</a>
   <ul id="subb3">
     <li>Subb3-1</li>
     <li>Subb3-2</li>
   </ul>
 </li>
</ul>