posted on:September 12, 2007
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 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.
- 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.
To see it in action click (or download) the example.
If you want to use this on your own site download the example, extract it and put the folder named “listexpander” into the root of your site. On page containing the list place this code inside the head tag.
<link href="listexpander/listexpander.css" rel="stylesheet" type="text/css" media="screen" />
List should have class name “listexpander”.
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Comments (51 Comments)
Sorry, the comment form is closed at this time.