posted on:September 12, 2007

List Expander


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.


<link href="listexpander/listexpander.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="listexpander/listexpander.js"></script>

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?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (51 Comments)

  1. webmack
    September 13, 2007

    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
  2. cssglobe
    September 13, 2007

    Sure it would. This article is more about the JS than CSS.
  3. aH
    September 14, 2007

    Doesnt work in Firefox but thank you for this as it is exactly what I was looking for.
  4. cssglobe
    September 14, 2007

    it should work in ff. I tested both ff pc and ff mac...
  5. Alexandre Figueiredo
    September 18, 2007

    I'm using FF 2.0.0.6 and it's working great. It's a great script! Congrats.
  6. Andrew
    September 18, 2007

    Awesome! Might try integrating this into the DF categories menu. Thanks!
  7. Alex
    October 11, 2007

    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.
  8. chris willis
    October 11, 2007

    nice work.
  9. BB Iverson
    October 22, 2007

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

    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
  11. Ken
    November 7, 2007

    Really neat javascript! Thank you for having made this publicly available. I was wondering if you could make a "definition list" (<dl> <dt> <dd>) version of this? You can "fake it", if you will, with this version as is, but at the loss of semantically correct markup. Example: <ul> <li> George Washington <ul> <li>The first President of the United states, blah blah blah</li> </ul> </li> etc. etc. This would be better in a definition list: <dl> <dt>George Washington</dt> <dd>The first President of the United states, blah blah blah</dd> 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... :)
  12. Ken
    November 7, 2007

    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!
  13. Tomas
    November 12, 2007

    Hello, thank you for very nice script. I would like to ask you - is there a way if I want to have some of <li> 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 :)
  14. cssglobe
    November 13, 2007

    @Ken: for definition lists I am preparing something similar. it would however have multiple presentation options (one of them is expand/collapse thing) so staz tuned :) thanks
  15. cssglobe
    November 13, 2007

    @Brad: It should be possible. Just apply the same class name to all lists and you should be set.
  16. cssglobe
    November 13, 2007

    @Tomas: This functionality is not available in this version but I can upgrade the script and include that. That's a very good observation thanks.
  17. Scott
    January 31, 2008

    Here's what I did for simple indentation in the CSS file: .listexpander li { text-indent:25px; } ---- .listexpander li li.collapsed{ ... 15px .4em; { .listexpander li li.expanded{ ... 15px .4em; { ---- .listexpander li li li.collapsed{ ... 15px .4em; { .listexpander li li li.expanded{ ... 15px .4em; { ===new== .listexpander li li{ text-indent:35px; } .listexpander li li li{ text-indent:45px; } --- Hope that helps somebody. And thank you very much for the wonderful code. I have a problem though, maybe you can help. If I have some line (such as Subsection 1) be also a link to open an iFrame window on the side, I don't want when I click on the text to also drop down the children. I want it only if I click on the Plus or Minus for the object to expand or collapse. Any ideas? Thanks.
  18. Scott
    February 1, 2008

    Here's what I did for simple indentation in the CSS file: .listexpander li { text-indent:25px; } ---- .listexpander li li.collapsed{ ... 15px .4em; { .listexpander li li.expanded{ ... 15px .4em; { ---- .listexpander li li li.collapsed{ ... 15px .4em; { .listexpander li li li.expanded{ ... 15px .4em; { ===new== .listexpander li li{ text-indent:35px; } .listexpander li li li{ text-indent:45px; } --- Hope that helps somebody. And thank you very much for the wonderful code. I have a problem though, maybe you can help. If I have some line (such as Subsection 1) be also a link to open an iFrame window on the side, I don't want when I click on the text to also drop down the children. I want it only if I click on the Plus or Minus for the object to expand or collapse. Any ideas? Thanks.
  19. Tim
    February 21, 2008

    Again, another thing claiming to be CSS when it is really CSS and Javascript. Since it uses CSS and Javascript this is not new at all.
  20. cssglobe
    February 22, 2008

    Tim, what do you have against JS? Do you really think that standards are only about using CSS and nothing else? If you think that, you're mistaking...
  21. gw
    March 9, 2008

    This script is great! I'm not very proficient in CSS or scripts, and I'm wondering if this will work in conjunction with scripts from Blogrolling. I was going to use Flooble to create expanding lists, but was unsure of where to put the initial script since I would have my expanding links in the sidebar of my blog. I suspect yours would be the same kind of setup, so my question stands true there, too. In which template file would I insert that first bit of code? I want to manage my pages and links in the least sloppy way - any suggestions?
  22. ed
    March 12, 2008

    Hi Nice script. Thanks very much. I am trying to edit it so that only one section can be open at a time, eg. like this: http://www.dynamicdrive.com/dynamicindex1/slashdot.htm I wonder could you give me some pointers on where to start? Cheers Ed
  23. JJ
    March 12, 2008

    when the list has no sublist...is there a way to hide the plus sign so people dont get confused and think that there is a sunlist?
  24. Horoskopy
    April 8, 2008

    Really nice work, thankx
  25. Dave Salmon
    April 25, 2008

    This does not seem to work in Firefox v2.0.0.14 Any chance on getting to work in the latest FF verison?
  26. Andy d
    May 21, 2008

    Nice script, but is it possible to change the link area? So it only expands/collapses when you click on the minimize/maximize button? I have tried a few things but none of them have worked. I am still learning the basics of javascript at the moment :(.
  27. kathy
    June 1, 2008

    This is what I was hoping to do to my categories, is that possible?
  28. Anders
    June 3, 2008

    How about if this list expander implements as a Menu at a site, the List expander will collapse after each click in the expander. How about to get around that, are that any way to define a sub tree to be expanded if it's being used with PHP or ASP?
  29. chris
    June 3, 2008

    Has anyone come up with an implementation of expanding certain entries when the page loads, like Thomas said? Thanks
  30. Kath
    June 6, 2008

    Just by fiddling with CSS, I've made a version that has the current page and all of that page's parents expanded when the page loads (each li has a div, and if any of the child links are to the current page, that div has a class of selected. All ul's that are the direct children of div.selected are set to display:block!important). But this way, the user can't collapse any of the parent uls for the page / list item that they're on. I'd like for them to be able to collapse them, which is going to require fiddling with the actual JS. What I'll want to do is say maybe, grad all the lis with children, except li's with some specific original class (like selected) and set that one to display:block originally. I'm not a javascript juru by any means, but if I come up with something that works I'll let you all know.
  31. ryan
    June 6, 2008

    Is there a way to start the list expanded rather than collapsed?
  32. Eric
    June 7, 2008

    How do you get this not to open every parent node when you click, say the 4th level plus? I don't want everything above it to expand, just that node.
  33. Steve
    July 5, 2008

    Great script and really simple to use. I am a complete css and html novice and am having trouble putting two separate lists on a page. The second list on the page seems to not collapse or expand properly whereas the first one works perfectly. This is the case even when I completely copy the coding for the first. I assume its something to do with identifying both lists the same but I don't have the knowledge to get around it. Please can you help Thanks Steve
  34. deb
    September 4, 2008

    links to java and example and download do not work
  35. Matt Greek
    September 16, 2008

    I have a question about alignment on the List Expander template from CSS Globe that I hope someone can help me with. On the 3rd level of the dropdown menu, if you write a question/topic that has to wrap to a second line, it doesn't indent and line up with the first line, rather, it buts up against the left margin, which ruins the clean look of this great template. I'm a CSS novice but I've gone through the CSS code experimenting with changes the different values to see what happens but I haven't been able to figure out how to make it line up. I've put an example up online to illustrate what I am talking about: http://www.mattgreek.com/listexpander/. Thanks in advance for any help you can give me. Thanks!
  36. matt1146
    September 16, 2008

    By the way, to the person in the comment above me, deb, I emailed Alen Grakalic a few weeks ago and he fixed the download so now the Java and the zip with all the files in it work now. Hope that helps.
  37. yasser
    September 25, 2008

    In Right-to-Left scripts, the "expand", "collapse" images are not aligned to right. I changed the image position to "center right" : background: #eee url(collapsed.gif) no-repeat 5px [center right];} but it doesn't work.
  38. Kevin
    September 25, 2008

    Thanks for the great script, etc., I've been looking for something like this forever. One thing though, and that it doesn't seem to work for me in Firefox (3.0) either, as some other commenters have noted, but works fine in IE 7.0. Any fixes, comments, etc floating around to solve this? Thanks again!
  39. Bastian
    October 9, 2008

    Hey there, this is a lovely Script, thank you :-) I just have one problem with it: how do you geht multiple lists to work? I have three different and seperated lists under different headers starting with <ul class="listexpander"> but only the first one is expanding/collapsing. How do I set this up correctly? Cheers, Bastian
  40. Rags
    November 9, 2008

    The script is superb and I wil be using it for the FAQ part. Than you very much.... Rags
  41. Mick
    December 30, 2008

    How can I use this method to open only one list element in the same level ata a time? Only one level and one item open at a time?
  42. Lex
    January 22, 2009

    This is the best list expander i've found so far. But I've got the same question as Mick (and Ed); "How can I use this method to open only one list element in the same level ata a time? Only one level and one item open at a time?" I really need someone to tell me whether this is possible or not. Thanks in advance.
  43. tek
    February 23, 2009

    Yeah, I found list expander.. looking great, thanks for this article.
  44. robin
    March 2, 2009

    Love this better than what I have been using. However, what I have been using (pureDOM) allows me to decide if the "parent" is used as hyperlink or not. In my case, I use a CMS to automatically create my menus. I need for parents to expand only, not act as a link. Any help on that?? :)
  45. Patsy Caldwell
    March 26, 2009

    I do love this list but would like to see a release or if anyone has a fix for FF3.0 and the up and coming IE8. Any ideas anyone?
  46. Patsy Caldwell
    March 26, 2009

    Hi Everyone - I discovered a "fix" for IE8 and FF3 after messing with it and it stills works in IE7 and probably in FF2 (haven't tested in FF2) as well. In the listexpander.css you need to change .listexpander{width:100%; } And just add "display:inline-block;" inside that first class so it looks like this. .listexpander{width:100%; display:inline-block;} It made my lists start out collapsed and works perfect in the newer versions as well. so
  47. Nick Kirk
    April 29, 2009

    Is it possible to configure the script and/or CSS to show the bullet points (list-style-type: disc or square) when the list is revealed? I'm only going up to second level: http://www.tunisiafirst.co.uk/resorts/hammamet/hotels/1active-mediterranee/
  48. John
    May 6, 2009

    Hello It has been asked about having only one sublist open at a time. This is how I did it, and it did not seem to break anything. I added list as a paramater to the listItem function, so listItem is now; function(li,list), and passed that in from create. Then, in the onClick function I added collapse(list); as the first statement. Hope this helps someone John
  49. Juliana
    May 29, 2009

    Hello Love the look of the list expander. I'm trying to find the section of the code where the onclick event for expand gif is executed. If shed some light on this I would appreciate it.
  50. vijay
    June 12, 2009

    how can i use two or more list expander in same page with first one one will be multi level and second one will be diffrent style. Please let me know.
  51. JoeRav
    June 28, 2009

    Has anyone figured out how to open a section from another pages anchor link? I want http://www.somepage.com/index.html#results to not only expand the section where the anchor lives but have the browser scroll to that section.. any ideas?

Sorry, the comment form is closed at this time.