Following my latest article I decided to take some of the visitor's comments in consideration and improve the script. It also has a new name: List Expander.
The basic concept remains the same as with Sitemap Styler, but the usage is a bit wider. We can use this script for any type of content that needs to be organized in some sort of hierarchy.
So, we have an unordered list that can go on in depth as much as we want. The script analyzes the list tree and applies toggle functions for expanding/collapsing child objects. Parent items, the ones we should click to expand child objects, don't need to be wrapped inside an anchor element. Script checks for child objects and adds appropriate clickable elements. Furthermore the script adds two buttons above the list, one for expanding and one for collapsing all the elements.
Markup
Markup is quite simple. All we need is a nice unordered list with our content. We then assign a class name "listexpander" to it and the script takes care of the rest. I used class attribute instead of id so we could have more than one of these lists on the same page.
As I mentioned earlier, the unordered list can have as many child lists as we want, no limitations here. It is just a matter of defining their appearance with css. Anyway, sample of the list is here.
Features
- List don't have a depth limit and you can use more than one list on the same page.
- Script dynamically adds buttons for expanding and collapsing all child lists.
- You can set depth level up to which you want to have lists initially expanded.
- Cross browser support.
- List is accessible to browsers without Javascript or CSS suport.
