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:
You can find a demo at:
How to integrate:
- Download the source-file from http://www.milaju.com/post/simple-jquery-expandcollapse-unordered-lists
- Extract the zip-file
- Go to Shared Components – Static files
- 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
- Go to the page where you want to make the list
- Put in the region source:
- 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>
- And voilà! The list is done! Easy, not?!