-
Feb 5, 2009 by Kevin - 19 Comments
Simple Accordion with JavaScript and jQuery
Jump right in and check out the example
I’ve explored many of the accordion jQuery plugins out there, and they all seem to be overkill and overly complex. I guess if you want something to work the way you imagine you need to build it yourself. Here’s a really, really simple way to build a sliding accordion with just 12 lines of JavaScript and jQuery. First, we’ll start with the XHTML structure I’ve used.
<ul class="expand"> <li class="trigger"><h4><strong>Reliability Engineering Consulting</strong> (366)</h4></li> <li> <ul> <li>Vibration Analyst (117)</li> <li>Oil/Tribology/Lubrication Engineer (93)</li> <li>Non-Destructive Testing (81)</li> <li>Motor Circuit (75)</li> </ul> </li> <li class="trigger"><h4><strong>Reliability Engineering Consulting</strong> (366)</h4></li> <li> <ul> <li>Vibration Analyst (117)</li> <li>Oil/Tribology/Lubrication Engineer (93)</li> <li>Non-Destructive Testing (81)</li> <li>Motor Circuit (75)</li> </ul> </li> <li class="trigger"><h4><strong>Reliability Engineering Consulting</strong> (366)</h4></li> <li> <ul> <li>Vibration Analyst (117)</li> <li>Oil/Tribology/Lubrication Engineer (93)</li> <li>Non-Destructive Testing (81)</li> <li>Motor Circuit (75)</li> </ul> </li> </ul>
In my example I’ve added some basic icons and css to give it some clarity for usability purposes. Here’s the CSS I’ve used, this can be modified to make things work for you.
ul.expand { padding:0; margin:0; list-style:none; } ul.expand li { padding:0; margin:0; } ul.expand li.trigger.top { margin-top:0; } ul.expand li.trigger { background:url(expand-collapse.gif) 0 3px no-repeat; cursor:pointer; padding:0 0 0 20px; margin:7px 0 0 0; } ul.expand li.trigger h4 { color:#666; } ul.expand li.trigger.open h4 { color:inherit; } ul.expand li.trigger.open { background-position:0 -997px; } ul.expand ul { list-style:disc inside; line-height:18px; padding:4px 0 6px 20px; }
Next we need to add the JavaScript to make it all work. Before we can do this you MUST include a copy of the jQuery JavaScript library or this WILL NOT WORK. Once you have that done, add the following after you’ve linked to jQuery.
$(function(){ $('ul.expand').each(function(){ $('li.trigger', this).filter(':first').addClass('top').end().filter(':not(.open)').next().hide(); $('li.trigger', this).click(function(){ if($(this).hasClass('open')) { return false; } else { $(this).parent().find('li.trigger').removeClass('open').next().filter(':visible').slideUp(); $(this).addClass('open').next().slideDown(); } }); }); });
That’s it, your ready to go. If you add a class of open onto one of the triggers it will be open by default. If anyone needs an explanation on how this works I can do a write up, everything should be pretty straight forward in the CSS in terms of design.
Hi, I'm Dan and I'd love to hear from you to explore the possibilities of your project.
Ebrahim
Just what I was looking for! I’ll use this more than the accordion plugin which is an overkill.
Thanks heaps.
Ebrahim
Oh, just one thing. How can I make all the menus contractible? Currently, atleast one menu stays open, it won’t close.
Many thanks
kevin
I knew someone was bound to ask that one. I was thinking about it while designing and I couldn’t think of reason someone would actually need to contract it. I can easily add that in for you though:
jQuery Accordion for Ebrahim
Check out the source, I commented out a line and added one after it. Basically we replaced return false; with the trigger function.
Thanks for the feedback, Fresh Tilled Soil: Web Resources is fairly new so if you have any feedback don’t hesitate to let us know.
Dan
Do u still have the code for this change
?
kevinlearynet
This request only makes sense, so I've changed the main source to accommodate this feature:
http://www.freshtilledsoil.com/web-resources/wp-s...
Mario
Your examples doesn't work…
Kevin
Hey Mario,
Sorry about that, it appear we lost some files during out latest redesign. I’ve fixed that example for you, and also fixed the presentation of the code in the post.
So sorry for the trouble, and thanks for bringing this problem to our attention!
Let me know if you have any questions using the Accordion
@e1evation
You say "Next we need to add the JavaScript to make it all work. Before we can do this you MUST include a copy of the jQuery JavaScript library or this WILL NOT WORK. Once you have that done, add the following after you’ve linked to jQuery." How do I do that???
kevinlearynet
Hey Todd,
Check out line 42 and 43. See how I loaded the jQuery library before using jQuery enhanced JavaScript? If you don't load the library you won't be able to use jQuery.
kevinlearynet
Check out Lines 42 and 43, you need to load the jQuery library before you can begin using jQuery enhanced code.
rana
hi, i also wrote an accordion on my blog here:
http://ranacseruet.blogspot.com/2009/12/simple-ac...
however, yours one is smaller & i liked it very much. Thanks
eddie
Hi!, I started using this accordion and it is perfect, light and so simple, thank you very much! I was wondering if there is any simple way to have a one of the list items opened when the accordion loads? I have seen other accordions with this implemented but none too similar to this one, and I’d like to keep using it if it all possible. Thank you very much.
Archi
Hey there,
I tried your example – working good
but one problem is if parent doesn’t have any child still while clicking on it ..it is sliding down …
how can I fix that?
Please help!
Archi
how can I change the code such that if doesn’t have any child then it should not slide down while clicking?
A
where can I find the expand-collapse.gif? Thx!! Great script… working perfectly for me.
Al
How can I make each one close by clicking on the minus sign?
Kevin
Hey Al,
It’s configured to do that. Is it not working for you?
Al
no… any tips?
Al
no worries…. got it working… thx!