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.
Designer, developer and a passionate standardista with huge experience in all types of front-end work. I've been featured on numerous css galleries including famous Css Zen Garden official list.
webmack on 13 Sep, 2007 wrote:
cssglobe on 13 Sep, 2007 wrote:
aH on 14 Sep, 2007 wrote:
cssglobe on 14 Sep, 2007 wrote:
Alexandre Figueiredo on 18 Sep, 2007 wrote:
It's a great script! Congrats.
Andrew on 18 Sep, 2007 wrote:
Alex on 11 Oct, 2007 wrote:
chris willis on 11 Oct, 2007 wrote:
BB Iverson on 22 Oct, 2007 wrote:
Brad on 3 Nov, 2007 wrote:
Ken on 7 Nov, 2007 wrote:
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 on 7 Nov, 2007 wrote:
Thanks again!
Tomas on 12 Nov, 2007 wrote:
cssglobe on 13 Nov, 2007 wrote:
cssglobe on 13 Nov, 2007 wrote:
cssglobe on 13 Nov, 2007 wrote:
Scott on 31 Jan, 2008 wrote:
.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 on 1 Feb, 2008 wrote:
.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 on 21 Feb, 2008 wrote:
cssglobe on 22 Feb, 2008 wrote:
gw on 9 Mar, 2008 wrote:
ed on 12 Mar, 2008 wrote:
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 on 12 Mar, 2008 wrote:
Horoskopy on 8 Apr, 2008 wrote:
Dave Salmon on 25 Apr, 2008 wrote:
Andy d on 21 May, 2008 wrote:
I am still learning the basics of javascript at the moment :(.
kathy on 1 Jun, 2008 wrote:
Anders on 3 Jun, 2008 wrote:
chris on 3 Jun, 2008 wrote:
Thanks
Kath on 6 Jun, 2008 wrote:
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 on 6 Jun, 2008 wrote:
Eric on 7 Jun, 2008 wrote:
Steve on 5 Jul, 2008 wrote:
Thanks
Steve
deb on 4 Sep, 2008 wrote:
Matt Greek on 16 Sep, 2008 wrote:
matt1146 on 16 Sep, 2008 wrote:
yasser on 25 Sep, 2008 wrote:
background: #eee url(collapsed.gif) no-repeat 5px [center right];}
but it doesn't work.
Kevin on 25 Sep, 2008 wrote:
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 on 9 Oct, 2008 wrote:
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 on 9 Nov, 2008 wrote:
Rags
Mick on 30 Dec, 2008 wrote:
Lex on 22 Jan, 2009 wrote:
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 on 23 Feb, 2009 wrote:
robin on 2 Mar, 2009 wrote:
Any help on that??
:)
Patsy Caldwell on 26 Mar, 2009 wrote:
Patsy Caldwell on 26 Mar, 2009 wrote:
.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 on 29 Apr, 2009 wrote:
John on 6 May, 2009 wrote:
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 on 29 May, 2009 wrote:
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 on 12 Jun, 2009 wrote:
JoeRav on 28 Jun, 2009 wrote: