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.
webmack 13 Sep, 2007
cssglobe 13 Sep, 2007
aH 14 Sep, 2007
cssglobe 14 Sep, 2007
Alexandre Figueiredo 18 Sep, 2007
It's a great script! Congrats.
Andrew 18 Sep, 2007
Alex 11 Oct, 2007
chris willis 11 Oct, 2007
BB Iverson 22 Oct, 2007
Brad 3 Nov, 2007
Ken 7 Nov, 2007
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... :)
Ken 7 Nov, 2007
Thanks again!
Tomas 12 Nov, 2007
cssglobe 13 Nov, 2007
cssglobe 13 Nov, 2007
cssglobe 13 Nov, 2007
Scott 31 Jan, 2008
.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.
Scott 1 Feb, 2008
.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.
Tim 21 Feb, 2008
cssglobe 22 Feb, 2008
gw 9 Mar, 2008
ed 12 Mar, 2008
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
JJ 12 Mar, 2008
Horoskopy 8 Apr, 2008
Dave Salmon 25 Apr, 2008
Andy d 21 May, 2008
I am still learning the basics of javascript at the moment :(.
kathy 1 Jun, 2008
Anders 3 Jun, 2008
chris 3 Jun, 2008
Thanks
Kath 6 Jun, 2008
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.
ryan 6 Jun, 2008
Eric 7 Jun, 2008
Steve 5 Jul, 2008
Thanks
Steve
deb 4 Sep, 2008
Matt Greek 16 Sep, 2008
matt1146 16 Sep, 2008
yasser 25 Sep, 2008
background: #eee url(collapsed.gif) no-repeat 5px [center right];}
but it doesn't work.
Kevin 25 Sep, 2008
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!
Bastian 9 Oct, 2008
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
Rags 9 Nov, 2008
Rags
Mick 30 Dec, 2008
Lex 22 Jan, 2009
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.
tek 23 Feb, 2009
robin 2 Mar, 2009
Any help on that??
:)
Patsy Caldwell 26 Mar, 2009
Patsy Caldwell 26 Mar, 2009
.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
Nick Kirk 29 Apr, 2009
John 6 May, 2009
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
Juliana 29 May, 2009
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.
vijay 12 Jun, 2009
JoeRav 28 Jun, 2009