Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

List expander is sponsored by Design Service for Developers and Css Templates by Templatica

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.

Example

To see it in action click (or download) the example.

View sample here | View JavaScript source | DOWNLOAD

Implementation

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.

List should have class name "listexpander".
Javascript file has a small editable area, where you can set depth level for initially expanded lists, button text and a class name for the "root" list but make sure that zou change the class name in css as well.

Please note that lists are expanded untill the page loads. We could hide childs lists with css (I have commented that part - display:none;) but then the list wouldn't be accessible to JavaScript disalbed and Css enalbed browsers. It's up to you to choose which way you want to go.

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• webmack on 13 Sep, 2007 wrote:

  indenting child and sub child list items would be nice. that should be pretty easy to do by adding some margin / padding in the CSS

• cssglobe on 13 Sep, 2007 wrote:

  Sure it would. This article is more about the JS than CSS.

• aH on 14 Sep, 2007 wrote:

  Doesnt work in Firefox but thank you for this as it is exactly what I was looking for.

• cssglobe on 14 Sep, 2007 wrote:

  it should work in ff. I tested both ff pc and ff mac...

• Alexandre Figueiredo on 18 Sep, 2007 wrote:

  I'm using FF 2.0.0.6 and it's working great.
  It's a great script! Congrats.
  

• Andrew on 18 Sep, 2007 wrote:

  Awesome! Might try integrating this into the DF categories menu. Thanks!

• Alex on 11 Oct, 2007 wrote:

  Nice. Maybe remove the '+' from the raw CSS and insert it dynamically with the JavaScript. It doesn't have any real meaning without JS, so rendering it by default can only really confuse people.

• chris willis on 11 Oct, 2007 wrote:

  nice work.

• BB Iverson on 22 Oct, 2007 wrote:

  Finally, a way to display my ever-growing category list in a nice concise manner. Thanks a bunch!

• Brad on 3 Nov, 2007 wrote:

  First, thank you, this is great. Next, is it possible to have lists in multiple columns or tables on a page? I could not get all my lists to work when I tried

• Ken on 7 Nov, 2007 wrote:

  Really neat javascript! Thank you for having made this publicly available.
  
  I was wondering if you could make a "definition list" (

  ) version of this?
  
  You can "fake it", if you will, with this version as is, but at the loss of semantically correct markup. Example:
  

  
  
  • George Washington
    
    
    
    • The first President of the United states, blah blah blah
    
    
    
    
  
  etc. etc.
  
  This would be better in a definition list:
  

  
  

  George Washington

  
  

  The first President of the United states, blah blah blah

  
  etc. etc.
  
  What do you think?
  
  Unfortunately, my java-scripting skills aren't exactly up to the task :(
  But if you're up to the challenge... :)
  
  

• Ken on 7 Nov, 2007 wrote:

  PS: hmm, should have used html entities to illustrate the html markup, intead of actual html markup. But if you look at the page source you'll see (better) what I mean.
  Thanks again!

• Tomas on 12 Nov, 2007 wrote:

  Hello, thank you for very nice script. I would like to ask you - is there a way if I want to have some of
• pre-expanded when I load the page ? So one of "root" li would have some id, or class to be pre-opened when the page loads. Please let me know if that is possible. Thank you very much :)