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 -
Now within the <body> section your HTML should look like this -
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"><!--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.
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);};
}
-->
</script>
Now within the <body> section your HTML should look like this -
<ul id="listCategories">That's it. You are done. Now check how the lists work. You can Try the Demo of Collapsible and Expandable Lists here.
<li>List by category
<ul>
<li><a href="#">Personal lists</a></li>
<li><a href="#">Dated lists</a></li>
<li><a href="#">Amount lists</a></li>
</ul>
</li>
<li>List by creation time
<ul>
<li><a href="#">1 month ago</a></li>
<li><a href="#">2 months ago</a></li>
<li><a href="#">3 months ago</a></li>
</ul>
</li>
<li>List by category
<ul>
<li><a href="#">Local lists</a></li>
<li><a href="#">National lists</a></li>
<li><a href="#">International lists</a></li>
</ul>
</li>
</ul>
27 comments:
Brilliant post! This is what I'm looking for! Thanks for posting!
How could you do this in a WordPress theme for blogs?
Thank you for sharing us this very interesting post. It is really informative and recommendable.
Wonderful and really easy. Love the sleek code for show hide ul li lists. jQuery is really cool. Love your implementation.
thanks so much for sharing it really helped
Thanks for the easy code is there a way to make it start of collapsed?
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.
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?
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/
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.
Yes, after tinkering around some more, I was able to fix it. Thanks for getting back to me about it! :)
Hey I still can't get this to work here. Not sure what I'm doing wrong. Thanks for your help!
http://jenna-laine.com/resume/
P.S. - I know I still have to plug in the text but wanted to make sure it was working first.
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 -
http://www.acmeous.com/tutorials/demo/acmeousCollapsibleLists/plus.jpg
http://www.acmeous.com/tutorials/demo/acmeousCollapsibleLists/minus.jpg
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.
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!
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?
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.
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?
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:
List:
Header 1
- Page 1
- Page 2
Header 2
- Page 3
- Page 4
etc...
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?
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".
Hello Acmeous...thanks for your work! I edited the images a little, and have this page working:
http://www.brocathalon.com/faq
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:
http://www.colormerad.com/faq.html
Thanks again! You're awesome to help like this.
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.
It only worked one time on a page. On other areas of the page it didn't work.
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!
thanks
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?
Very slick - thanks so much!
Thanks so much for sharing, This is what I'm looking for!
Post a Comment