Create collapsible list (alternative to apex tree)

After some testing en struggling with the Apex-tree item I decided to look for an alternative for an expanding and collapsable html-list.

Because of the integration with Jquery in apex, i obviously looked for an apex plug-in and found a really ease one.

The plug-in is written by Milaju and the source and documentation can be found at:
http://www.milaju.com/post/simple-jquery-expandcollapse-unordered-lists

You can find a demo at:
http://fluidbyte.net/workshop/jqcollapse/

How to integrate:

1. Download the source-file from http://www.milaju.com/post/simple-jquery-expandcollapse-unordered-lists
2. Extract the zip-file
3. Go to Shared Components – Static files
4. Upload the files “jquery.collapse.js” and “jquery.easing.js”. You do not need to upload the file “jquery.js”, because it’s already available within Apex
5. Go to the page where you want to make the list
6. Create a new HTML-region named “_Javascript”; display point: After Header (I always use a separate region were I put custom javascript. So when I open a page I can see if there is any custom javascript).
7. Put in the region source:

   <script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.easing.js"></script>
   <script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.collapse.js"></script>
   <script type="text/javascript">
     $(function(){
         $('#collapser').jqcollapse({
   	      slide: true,
   		  speed: 500,
   		  easing: 'easeOutCubic'
         });
   	});
   </script>

8. Make a new report region which makes the list-output as shown under. (the most important thing is to give the first ul-element the id “collapser” and keep the structure of the elements UL en LI the same)

   <ul id="collapser">
     <li>Item 1
       <ul>
   	  <li>Item 1.1</li>
   	  <li>Item 1.2
   	    <ul>
   		  <li>Item 1.2.1</li>
   		  <li>Item 1.2.2</li>
   		</ul>
   	  </li>
   	  <li>Item 1.3</li>
   	</ul>
     </li>
     <li>Item 2
       <ul>
   	  <li>Item 2.1
   	    <ul>
   		  <li>Item 2.1.1</li>
   		  <li>Item 2.2.2</li>
   		</ul>
   	  </li>
   	</ul>
     </li>
     <li>Item 3</li>
   </ul>

9. And voilà! The list is done! Easy, not?!