Spread the word

Tuesday, March 22, 2011

How to Create Easy Collapsible and Expandable Lists in JavaScript

Here is a very quick and easy way to make your lists collapsible and expandable on clicks by using JavaScript. Now when presenting a long lists of item you can set them to remain collapsed on page load, but after that users can click and expand any of those list headings to see the full list of items. Unlike accordion, here users can easily open up all the lists one by one. Checkout the Demo of Collapsible and Expandable Lists which is created here.
First, just include a JavaScript file in your <header> section of the page -

<script src="http://www.acmeous.com/tutorials/demo/acmeousCollapsibleLists/acmeousCollapsibleLists.js" type="text/javascript"></script>
Then just below it, within the <header> section of your page, add the following code -

<script type="text/javascript"><!--
if (window.addEventListener) {
window.addEventListener("load", function(){makeCollapsible(document.getElementById('listCategories'), 1);}, false);
} else if (window.attachEvent) {
window.attachEvent("onload", function(){makeCollapsible(document.getElementById('listCategories'), 1);});
} else {
window.onload = function(){makeCollapsible(document.getElementById('listCategories'), 1);};
Here "listCategories" represents the id of the parent <ul>. If your parent <ul> has got some other id then make sure to replace that in here. The parameter value 1 here means that the lists will be presented in expanded condition when the page loads. You can set it to 0 if you want your lists to be collapsed on page load. Default is the expanded view.
Now within the <body> section your HTML should look like this -

<ul id="listCategories">
    <li>List by category
            <li><a href="#">Personal lists</a></li>
            <li><a href="#">Dated lists</a></li>
            <li><a href="#">Amount lists</a></li>
    <li>List by creation time
            <li><a href="#">1 month ago</a></li>
            <li><a href="#">2 months ago</a></li>
            <li><a href="#">3 months ago</a></li>
    <li>List by category
            <li><a href="#">Local lists</a></li>
            <li><a href="#">National lists</a></li>
            <li><a href="#">International lists</a></li>
That's it. You are done. Now check how the lists work. You can Try the Demo of Collapsible and Expandable Lists here.


plumbing said...

Brilliant post! This is what I'm looking for! Thanks for posting!

Anonymous said...

How could you do this in a WordPress theme for blogs?

Double Glazing said...

Thank you for sharing us this very interesting post. It is really informative and recommendable.

Ablezious said...

Wonderful and really easy. Love the sleek code for show hide ul li lists. jQuery is really cool. Love your implementation.

Anonymous said...

thanks so much for sharing it really helped

Leon said...

Thanks for the easy code is there a way to make it start of collapsed?

Acmeous said...

Yes there is.
In the function call - {makeCollapsible(document.getElementById('listCategories'), 1);}, false); - 1 means the list is expanded by default. Set it to 0 and your list will be by default collapsed.

Anonymous said...

Great, thanks. I was able to figure out how to add a child list which is also collapsible by adding a separate "script type" section with its own "ListCategories" name and a matching nested ul id. But how do I indent the child from it's parent?

Gina said...

I'm having similar issues that How To Wire had with the +/- images being "missing" and unable to figure out how to fix it despite many attempts.
Please help.

Here's the page I'm trying to fix: http://www.gcimages.net/blog/about/articles/

Acmeous said...

Hey Gina,
I think its working fine on your site as your have copied the JS and image files properly :).
Thanks for visiting my blog.

Gina said...

Yes, after tinkering around some more, I was able to fix it. Thanks for getting back to me about it! :)

Jenna Laine said...

Hey I still can't get this to work here. Not sure what I'm doing wrong. Thanks for your help!


Jenna Laine said...

P.S. - I know I still have to plug in the text but wanted to make sure it was working first.

Acmeous said...

Hey Jenna,
I saw your page is already working. Just copy the plus.jpg and minus.jpg images to your server and those will show up.
Copy -
The images should here - http://jenna-laine.com/resume/minus.jpg and http://jenna-laine.com/resume/plus.jpg.

Let me know if you still face issues.

Jenna Laine said...

Thanks for your help! I have a 1&1 site if that means anything. It doesn't seem to allow me to put anything on the server like that. I uploaded them directly on that page but it didn't seem to work. I don't necessarily need the plus and minus buttons, but still striving for the effect. I don't know if that's even possible. Sorry to be a pain!

Anonymous said...

Thanks so much for the code. It seems you've overloaded the .click action to facilitate expansion and collapse. Unfortunately, this prevents links from working correctly as list elements. Do you know off-hand of a way to re-add this functionality, probably as a single line in prepareList() of scripts.js?

Acmeous said...

Hey Anonymous,
I have done all the action on the click of the "plus.jpg" image and intentionally didn't touch the text of the list since those texts can contain links. So this shouldn't be interfering with links. But please let me know how you are trying to implement this then I can be of some help definitely.
Please contact me for specific solution.

Anonymous said...

For some reason IE9 doesn't read the script and is presenting the list expanded and it doesn't allow you to collapse but it works great in all other browsers. Help?

JD said...

Nice script. I use it as a menu. Now what I would like to do is expand the menu to the correct place when the page opens. So the scenario would be:
Header 1
- Page 1
- Page 2
Header 2
- Page 3
- Page 4
Each page uses the same script based menu. What I want to do is expand the menu to the correct place e.g. if I click on Page 3, the page opens with the Header 2 expanded and Header 1 collapsed. Is this possible?

Acmeous said...

Hi JD,
You can do it easily by just setting the class of the "li" which contains your present page (say "Header 2" here) as "collapsibleOpen".

Ray said...

Hello Acmeous...thanks for your work! I edited the images a little, and have this page working:


My only question is, can we make the whole first line "clickable"? For example, instead of just clicking the plus sign, you could click "List by category" as well. This page shows what I'm thinking of:


Thanks again! You're awesome to help like this.

Ganeshan Nadarajan said...

When presenting a long lists of item you can set them to remain collapsed on page load, but after that users can click and expand any of those list headings to see the full list of items.

Anonymous said...

It only worked one time on a page. On other areas of the page it didn't work.

Rhyll de Teliga said...

Hello this is great but just one thing which im not really sure how to do is this:
i would like to be able to have some of the main list items to not be expandable (as in not have the plus next to them) and just be an ordinary item (as in are of the same level as the expandable ones but not expandable)
this is due to the (document.getElementById('listCategories'), 1);}; function and have tried ClassName and making the list items into classes but it wont work - would you be able to suggest anything - im a noob also!

crack$ said...

Thanks for this great code! It is very simple and useful!

I would like to get rid of the [+] and [-] open/close buttons, and instead have the text in the < li > be clickable, to expand the list. I have been poking around but can't figure it out. Can anyone lend a hand?

Anonymous said...

Very slick - thanks so much!

Waterproofing Service said...

Thanks so much for sharing, This is what I'm looking for!

Post a Comment