Accordion – Super simple javascript accordion jQuery plugin
This Jquery plugin makes creating accordions pain free. Just create an ul list and call the accordion javascript method and it is all done! Also it is super lightweight, just around 0.5kb. This Accordion script sets no limit for the depth of your accordion. You can make it as many level as you want.
This Jquery plugin makes creating accordions pain free. Just create an ul list and call the accordion javascript method and it is all done! Also it is super lightweight, just around 0.5kb. This Accordion script sets no limit for the depth of your accordion. You can make it as many level as you want.
How to use Accordion
It is very easy to use Accordion. All you need to do is to create an ul-list, fill it with a couple of li-elements and div-elements for the content; In the example below if you click on New York the div element containing Information about New York will show.
<ul>
<li>
<a href="#america">America</a>
<ul>
<li>
<a href="#america-newyork">New York</a>
<div>Information about New York</div>
</li>
<li>
<a href="#america-sanfransisco">San Fransisco</a>
<div>Information about San Fransisco</div>
</li>
</ul>
</li>
<li>
<a href="#antarctica">Antarctica</a>
<div>Information about Antarctica</div>
</li>
</ul>
When you have created the necessary html code you need to include the javascript file with the plugin and call the accordion method. See the demo for a more detailed example.
$('ul').accordion();
Linking to a level inside the accordion
Notice the href-attributes on each a-element. If you in the html code example above create a link to #america-newyork and click it the accordion will open up ‘New York’ and all it’s parents.
Open a panel on load
Set the li classname to “current” and it will be open when the page loads.
| Version | Changes |
|---|---|
| 1.3 | Refactored code and fix a bug with images inside a tags |
| 1.2.2 | Added functionality to open a panel on load by specifying the li class to “current”. |
| 1.2.1 | Fixed an error that occurred when no hash was set. |
| 1.2 | It is now possible to link to a specific level using a hash |
| 1.1 | Fixed an issue causing the accordion to stop working if you applied the accordion method twice on the same element. |
Comments
Make a comment
Projects
- Accordion (jQuery)
- Airport (jQuery)
- Defaultvalue (jQuery)
- Elastic (jQuery)
- Highlight (jQuery)
- Keycan
- Lazy (jQuery)
- Limit (jQuery)
- Password Strength (jQuery)
- Show Password (jQuery)
- Tabify (jQuery)
- Valid8 (jQuery)
Latest posts
- July 8th, 2009 Why are we typing passwords twice?
- July 5th, 2009 Don’t stop password masking; let the user decide
- June 1st, 2009 You can’t validate email addresses with regular expressions
- May 20th, 2009 Konami Code: Why so verbose, when you can make it in 140 characters?
- May 18th, 2009 Let your users know if Firebug slows down your web page.
Jan,
Is there a way to open the accordion to a specific level when a page is opened?
A bit like the ‘activate’ method in the accordion UI?
Great work btw :)
Thanks,
Matt
@Matthew Chambers:
No sorry there is, at the moment, no way of activating a specific level at page load. But the accordion will be updated in a couple of days with a hash logic similar to the one Tabify uses – http://www.unwrongest.com/javascript/tabify/.
Just my thought. If that is an option that it would be perfect!
Hi, I’m going to set this code, thank u for your work, about active element – it would be usefull very much plus I need links inside if il-elements. On my site u could see now accordion – but the weight – brrr! Thank u one more time, that u work on this tool!
I’d like to use images inside the tags. But it douesn’t work. Please help!!
@Matthew Chambers, Jonas and Juliya:
I’ve updated the script so you can link yo a specific level using a hash.
Very appriciate.
Perfect – exactly what I required. Thank you for all your hard work :)
Hi, thanks for this simple, lightweight sollution. Is there a way to activate by buttons / links. In this way you can put buttons in the content to scroll through panes.
thanks
Breaks on jQuery 1.3.1 -> 1.3.2. Any idea why? Cheers.
It is not working with jQuery 1.3.2
@Onyx and Swan.
For Jquery 1.3.2 to recognize an element as visible it has to have an offsetHeight or offsetWidth > 0. In my demo the ul elements inside the accordion had an offsetHeight of 0 despite that they where visible.
I have updated the demo page with some new css that works with 1.3.2
Thanx
I appreciate your response
Hey Jan,
Thank you so much for the code, awesome work mate :)
Is there a way of making it open bottom up though, so the clickable ‘dt’ div would appear below the content it displays.
Cheers,
Rad
@Rad,
Yes, just place the div-element before the a-element.
<div>Information about San Fransisco</div>
<a href="#america-sanfransisco" rel="nofollow">San Fransisco</a>
Thank you for your response Jan, awesome :)
Fantastic Code, I’ve been playing around with different jquery accordions and this one is the best and easiest by far. I have a question however. I want to change the background image for links in sub levels so that they look different than the main levels. Is this possible? Or because we declare the background image for all links, we’re stuck. Here’s my CSS:
.accordion { font-size: 16px; padding-left: 15px; padding-bottom: 0; padding-right: 0px; padding-top: 0; width: 205px; list-style-type: none; margin: 0px; }
.accordion ul { padding: 0px; margin: 0px; float: left; display: block; width: 205px; }
.accordion li { padding: 0px; margin: 0px; cursor: pointer; list-style-type: none; float: left; display: block; width: 205px;}
.accordion li.active>a { color: red; background: url(http://www.supermarchepa.com/imgs/nav/arrow_down.jpg) no-repeat 0 3px; }
.accordion li div { border-bottom-color: #999999; border-bottom-style: solid; border-bottom-width: 1px; display: block; clear: both; float: left; width: 205px;}
.accordion a { padding-left: 20px; padding-bottom: 5px; padding-right: 0px; padding-top: 0px; background-position: 0px 3px; background-image: url(http://www.supermarchepa.com/imgs/nav/arrow.jpg); background-repeat: no-repeat; text-decoration: none; display: block; cursor: pointer;}
/* Level 2 */
.accordion li ul li {background-image: url(none);}
As you can see, for the level 2 line, I tried to have no background-image but it didn’t work.
Any ideas.
Thanks a lot, awesome code
Hi, I found a way to open a level without hash:
After hiding all content I re-open a special level by his id with $(‘QuickStart’).show() in line 10. it works fine and I’m happy now
Hi Jan,
Great lightweight accordion – thanks a lot !
I have a feature request – a possibility to have multiple hyperlink tags “inside” or “beside” the main hyperlink.
For.ex.:
Americaclick here for external resource about ‘America’
Lorem ipsum dolor
This feature is missing from all accordions I know and I don’t think I’m alone with such need.
Or, perhaps, there is some kind of workaround ?
Thanks a lot again.
@lauris:
If you do like this
America
America External
And then update row 11 in the source code from
$.each($(this).find(‘a’), function(){
to
$.each($(this).find(‘a:not(.external)’), function(){
I think you get what you are looking for.
Thanks Jan, with your suggestions and some CSS tweaks I got what I needed. I’ll use your accordion for my current project :).
Thanks again.
Hey. Great plugin. I have a question about easing or at least speed. Is there a simple way to slow down the animation?
@aaron:
Sure open up jquery.accordion-1.2.1.source.js
Goto line 30 and change .slideUp(‘fast’); to .slideUp(‘slow’);
Goto line 31 and change ?’fast’:null); to ?’slow’:null);
I’ve found it by looking in the source. Amazing work. Seriously.
Thanks Jan. Works great, but i’m not sure how to display an open specific level. Can you pls give a code example?
Duh…. Found it.
Hi Jan,
Can you add the functionality to have an active panel open onload by specifying the LI to class=active?
This would be similar to your tabify plugin.
Fantastic work, looked through a fair few and this is the best I’ve seen.
Hi Jan, one more question. Inside div-elements for the content, I’d like to use and tags as normal to display unordered list(s). However, tags get’s “display: none” assigned by the javascript. Could you share a workaround to avoid this ?
Thanks a lot again.
i.e. ul and li tags.
nice. but doesn’t work in firefox
I does for me in FF. In what version of Firefox, and under what os, does it not work for you?
Hi Jan,
I’m trying to combine your wonderful Accordion with Lightbox (found here: http://leandrovieira.com/projects/jquery/lightbox/).
However it’s not working for me. Although I know nothing about Java Script, one thing I can see looking at the code, there are two ‘functions’ in my combined HTML doc calling up data:
lightBox -
$(function() {
$(‘#gallery a’).lightBox();
});
…and Your code –
//
Could your code be somehow over-riding lightBox function?
At the moment only accodrion works for me, when I open the div which suppose to hold lightBox only the heading shows up but no images.
Please help if you can :) I’m pulling my hair out.
Cheers,
Rad
…sorry thecodes didn’t copy properly, here it is again:
LightBox function:
$(function() {
$(‘#gallery a’).lightBox();
});
…and your code:
//
$(document).ready(function () {
$(‘ul’).accordion();
});
I’ve two changes to handle the “back”-button behaviour:
1. In Line 14 change return void(0); to return false;
2. In line 20 change active = $(this).find(‘a[href=' + location.hash + ']‘)[0];
to active = $(this).find(‘a[rel=' + location.hash + ']‘)[0];
Hi Tommy, I need this behaviour, but changing the code above breaks the accordion. Do you have an example that I can look at?
Excellent, lightweight solution. It’s incredibly easy to implement and works like a dream. I wanted a no-fuss accordion and this works perfectly, so thank you for your efforts. You are now bookmarked! :)
Thanks Carl! :)
hi, i’ve found you’re accordion by he way and i would know why i’ve done something wrong.. if u can. Maybe that’s because i’ve a lot of divs in the content or maybe cuz i have lightbox n carousel, but, when i comment the line $(\’ul\’).accordion(); my site work again. If not, i can’t expand the a href by clicking and my carousel n lightbox doesn’t work anymore.
Then, u could help me? you’re accordion could save me a management problem i found it really easy to understand.. before this, lol.
Sure. Ill send you an email
hello! very nice work! :D
i was wondering if it possible to nest your vertical accordion inside a horizontal accordion, or if it would be possible to turn this particular accordion in to a horizontal that nests the vertical accordion?
That should be possible. But you cant build a horizontal accordion with this plugin.
Hey, awesome code, really really great. I’d like to replace the text links with rollover image links, but this doesn’t seem to work at all… Any ideas why?
I wanted to include a bulleted list inside the accordion. Is this possible?
Hi,
Is it possible to prevent all from closing? E.g. leave at least one open. Currently, if I click on the opened one, it’ll close.
Thanks!
Hi Lyon,
This did the trick for me:
change in the source.js the click function (starts at line 13) into:
$(this).click(function(e){
var current = $(this)['parent'](‘li’).attr(“class”);
if (!(current == “current active” || current == “active”)) { activate(e.target); }
return void(0);
});
I’m having trouble with the link styles in IE7. In Firefox no problems, nice a:hover effect, but IE7 seems to ignore the a:hover. Is this a known problem?
Thanks.
That shouldn’t be a problem.
If you http://pastebin.com/ your code or email it.
I can have a look at it.
I’m sorry, I did do a lot of searching before posting here but I’ve already solved this. I was a bit sloppy today. It seems that I’ve forgot to put href elements within the a tag. I was working with html setup from another project and simply forgot this.
Gorgeous! It doesn’t seem to work with dynamically loaded listed (ajax) though. : ( Am I wrong?
It depends on what you mean. As long as you first do your ajax-request and then initialize the plugin it should work fine.
Hi I have problem, when loading ajax subpage dynamically through ajax.
I am not able to activate accordion when I use : href=’javascript:ajax_load_page(“page”, “container”); selector.accordion()’;
before this I used accordion on different document element with different selector.
May you help me?..
Thank you
im trying to implement this sweet piece into drupal, anyone in here done that yet?
Lovely work, Jan, thanks.
I – and Lauris (1 May) and Seth (26 Jun) – would like to know if it’s possible to include unordered lists within the content of an accordion pane. Any pointers?
Just to let you know, that when I press the back button, the content will not show! This may be a usability problem but I’ve seen this integrated in other accordion scripts…. i just can’t remember where, that’s all =(
Thank you for the work! I was trying to modify one aspect but have not been able too. My menu does not use s but has s in their place (as your example). I’m trying to get those sub s to expand when they are assigned the class “active”.
It seems my code was scrubbed. So double posting:
Thank you for the work! I was trying to modify one aspect but have not been able too. My menu does not use div but has ul in their place (as your example). I’m trying to get those sub ul to expand when they are assigned the class “active” as the div do.
[...] the work section and subsections. (While we’re in the habit of sharing – we chose this plugin to accomplish [...]
[...] Download Demo Categories : Uncategorized [...]
Hi,
Excellent plugin – I was wondering if it was possible to disable the click to close functionality – so that one of the sections is ALWAYS open, and you can’t click that section again to close it?
Hey there! This is beautiful work! I do have a question, though. I’d like to set it up so everything is expanded on page load, and then allow the user to close items individually and independently of other items, selectively hiding them. Is this possible with this code? If so, what should I do? Thank you very much!
Hey! Thanks again for the neat code. I fiddled with it until I got it to do what I needed. I’m not entirely sure what I did, but hey, it works! Thank you kindly.
In order to target a specific UL I changed line 7 to ‘$.each($(this).find(‘ul class=”accordion”, li>div’), function(){‘ However, when I place a second level in the accordion it immediately closes unless of course the the li tag is set to li.current, any recomendations?
If I was just a little more patient I could have figured this out before I made the post. In order to corret my issue I updated the call method from
$(‘ul’).accordion();
to
$(‘ul.accordion’).accordion();
This specifically target the UL class=”accordion” instead of the other UL. Sorry for the early post without thinking this through.
hi jan, nice work..
is it possible to open respective li when i click a link from outside menu?
eg : America or San Fransisco
these links are outside the menu (somewhere on the page).. when i clicked the link, the menu should open respective li and show the second level or div content.. any idea..
I hate to complain about this great code, but I am getting an odd jerkiness whenever I click on the last level of an accordion, in other words, when I open a div, it is not a smooth slide. Have you seen this problem? Any help would be much appreciated.
Hi Jan,
great work. Just one small question: How could I add a link (using a href=…) within the description text without being formatted like the column header?
I messed around with a few non-plugin accordions because I figured it’d be “cleaner” to just use core jQuery functionality instead of including MORE JavaScript; what a waste of time. I’m using your accordion plugin now on a small project and it’s working great.
Thanks.
on Linking to a level inside the accordion, problem is I placed this in something like a tab slider. i got this sidebar which links to a menu in the tab slider that has the accordion, but i can’t get it to link it to the levels inside the accordion to open as a user clicks on the sidebar link, i hope that’s clear. help.
this is great…but…. it doesn’t seem to work on a page that uses any nested lists other than those in the accordion. any ideas on a fix?
found a fix to my nested list problem, change line 7 of the code to this:
$.each($(this).find(‘ul.accordion, li>div’), function(){
to make the js act specifically on accordion lists. hurrah!
When you shrink your demo down really small like 300px x 300px the vertical scrollbars disappear.
Is it possible to have to accordions (seperated from each other) in one singel webpage.
I want to use an accordion for my navigation menu, and also one at the bottom of my text with ‘more info’, wich has only one with the extra info.
I tried to have the two accordions on one single web page, but the second one doesn’t work.
There are some errors in my message above. I repeat…
Is it possible to have two accordions (seperated from each other) in one single webpage.
I want to use an accordion for my navigation menu, and also one at the bottom of my text with ‘more info’, wich has only one ‘li’-tag with the extra info.
I tried to have the two accordions on one single web page, but the second one doesn’t work.
Yes, I have two on a single page, they’re actually nested within each other, but they are two different accordions. If they work nested I’m sure they’ll work sequentially on the page.
excellent work, but i wanted to use images inside the tags but it didnt work.. any help?
I had the same question as Ranjith…
is it possible to open respective li when I click a link from an outside menu?
eg : America or San Fransisco
these links are outside the menu (somewhere on the page).. when i clicked the link, the menu should open respective li and show the correct level or div content.. any idea..
So that you can open the accordion from clicking a link separate from that of the li item in the accordion..
Any help greatly appreciated.
Great script.
Hi, Jan.
Thank you for your simple and clever script.
But now i have some problem with anchor links, on the same page.
For example the code below:
————————————————————-
New York
Lorem ipsum dolor
dolor
Lorem ipsum
______________________________
so, if i klick on “dolor” (at first tag), it won’t go to the second , – and here i don’t know what’s the reason…
Linking to a specific node does work, but if you click on another and then use the browser’s back button, the address changes but the active node doesn’t – can you update your script so that the active node stays in sync with the browser history?
I love this accordian, but I have a pretty basic question. I’m new to jQuery in general so it could be pretty simple.
I’m trying to format the text in the title of a dropdown, for example:
San Fransisco
Information about San Fransisco
Unfortunately, when doing this the section will not dropdown if you click anywhere inside the tag. This is the same for tags and pretty much anything else. Is there a way to get around this?
Didn’t know comments supported HTML, sorry. Hopefully you get the idea.
I had to revisit this page following a couple more issues I’d had integrating this great script into a webiste I’m building.
Here’s the rub – when using this script on pages that include multiple nested lists – pay careful attention to my comments from the 16 October and Heath’s comments on the 17th of September.
Hello.
I find your accordion really great.
I have a question: on my pages I have a already, because of the main menu. How can I address the second UL to make it an accordion without affecting the first ?
Thanks in advance for your courtesy.
Sergio
Italy
Hi Jan, great code. I did notice from the comments above that a couple of people have had the same issue as me. I am trying to use images for the navigation items but this breaks the navigation. Is there a reason images cannot be used or if not how can this be implemented.
I cannot make accordion work unless I put the tag on the outside of my tag. But in doing so, it is invalid XHTML. Is there any workaround to this?
**Unless I put the (a) tag outside of my (h2) tag.
YES!
This is the only accordion I have found that can have all the nested tables customizable with their own css in a fairly straightforward manner and still have a sophisticated look.
thank you SO much- keep up the great work !
:)
Great tutorial :-) I’ve tried it on my web and it works excelent
Hello Jan, first i wanna say thank you for this plugin
it really helped me a lot, great work…
but i was wondering, is it possible to make the other tab to stay open while viewers opening the other one?
so users could view all of the list and explanation completely
thanks before
Currently if I leave one item open (e.g. New York) and click Antarctica and again America, New York is still in open state. How can I get the items to appear in their default, hidden state?
Thanks for the advice. Great work!
Hi Jan,
First, sorry for my little english.
Thanks for this code and tutorial.
Very useful for me.
However I’m not bad with css/html, but loose with JS.
Actually I’m in trouble with the “Open a panel on load” function…
I can understand “Set the li classname to “current” and it will be open when the page loads.”, but I can’t set it to work!
You can see my example at http://tinyurl.com/yb8resd
And go to the first menu item: Fashion acc… > collection 07/08.
I’m turning around since few days! Trying to mod the li class html css and js. I can’t make it work, wich it look to be simple.
Any help much appreciated!
this is the best accordion :)
Is there a way to get this accordian to open the focused panel at the top of the page? My backlinks work correctly – opening the right panel – but it’s off the viewable area of the page, down at the bottom. How do I fix this? Thank you for a great script. – Andi
Hello, this is a wonderfull script, lightweight and efficient.
I only have one problem, like a user above, i need the script not to close tabs, ever. Only to move between them.
Someone had posted this code:
This did the trick for me:
change in the source.js the click function (starts at line 13) into:
$(this).click(function(e){
var current = $(this)['parent'](’li’).attr(”class”);
if (!(current == “current active” || current == “active”)) { activate(e.target); }
return void(0);
});
But it does not seem to be working anymore.
Thank you!
Hello, I wike your accordion very much. I want this accordian to work only with one level, since inside I am using another unordered list which I don’t want to be associated with the accordion script. I know I can use styled instead but that’s not the point, can you let me know how to fix this?
Hey thanks, this solved an issue i was having with a site. Made it much easier to view and edit.
Have you implemented the hash feature yet? So I can either A) start an accordion with one open or B) keep one open when I select an element from with an accordion – that is, I’m using the accordion as a left nav item. And need to keep the accordion open when I click a link in that accordion.
I had read over all the comments regarding the nested unordered list and cannot decipher what needs to be done and where. I can get the and to open but there is no formatting or styles visible. Any suggestions?
I’m using your Elastic inside the jQuery UI accordion and it isn’t working. Have you tried Elastic inside your own Accordion? If so, does it work?
µ
Hi, nice script, but… how to add normal links inside content without being formatted like “accordion a.” ? Is it possible?
Thanks in advance!
Its so easy………..thanks a lot to you and your time.
Your time is saving time of thousands of designers/programmer around the world………..
susi, just put your links inside and all will work correct, but you’ll need to change style for this accordion
Note for author: your demo use accordion version 1.2.2 and class “current” work correct, but latest version 1.3 don’t “used” class “current”. It would be good if you fix this for version 1.3. Thanks.
very nice! this is what I was looking for, but I do have a question, is there a way to have an “external” link list to open the panels? lets say I have
links
– 1 2 3 4 5 –
accordion
1
2
3
4
5
how can I make it so if I click on the links outside the list the corresponding panel opens up, any idea?
hi,
i just need a help with accordion menu,if suppose i will come with some other page in the site with href to the accordion menu. Is it possible to move that href to that particular accordion section to open instead of showing accordion menu!!!!!!!!!
Hi ! I love the accordion, but it seems to be assigning the accordion ul and li classes to lists in the page that are not meant to be part of the accordion. Seems like a bug… possible to fix?
sorry I meant to ask before I hit submit! if there was a quick js fix I could paste in the js if you thought of one – right now it is making other lists all over the place pick up the accordion font, float, and other styles – kind of a mess. But I would like to use your accordion instead of another because it is elegant and perfect for my purpose… thank you!
oooh ! I found it already addressed in earlier comments. Thank you!!
It looks like the fix from October for targeting only .accordion ul’s prevents the “current” class and the nested accordion ul’s from working properly. Is it possible to get a strip of code to fix? Also, a request – it would be very nice to switch accordion title text with the open-close feature, for example, change “America +” to “America -” using text instead of classes with images. I’m so sorry about my multiple posts – I keep thinking I have asked everything!
Hi! Can anyone here tell me how to make accordion open multiple tabs. Currently it opens one at a time. I want to control it for opening multiple tabs. thanks
Is there a way to open the accordion to a specific level when a page is opened?
A bit like the ‘activate’ method in the accordion UI?
Yes we can….
Add This:
$.each($ul.find(‘li.active>div’), function(){
$(this).show();
});
After
$.each($ul.find(‘ul.accordion, li>div’), function(){
$(this).data(‘accordiated’, true);
$(this).hide();
});
And add class=”active” for list that you want to open.
It’s work for me.
Thanks Catur Ujianto, this worked great.
Hi…
I’m sorry for my very bad english, i dont understand a lot of things you’re talking about T_T
My problem is this:
I took my accordion from this page:
http://demo.tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/demo.html
The thing is: how can I do to have a specific panel expanded when I open my website??
What do I have to modify or what do I have to change?
I want to keep the “jumping” effect…
Thanks for this. This helped me decrease my development time
Is there a way to remove the “+” sign for the items that do not have a secondary list of items – i.e. “Google” in the example has an “open.gif” indicator, but shouldn’t have one.
Awesome it works, but i having some issue with IE8, I have this accordian set about half way down on a test page and for some reason when I link to the page, the page opens and centers on the accordian cutting off the top half of the page. Of course the accordian opens on the first tab, but for seem reason i cant get that from opening either….Help please!
Sorry figured it out…
Is there a way to remove the “+†sign for the items that do not have a secondary list of items – i.e. “Google†in the example has an “open.gif†indicator, but shouldn’t have one.
Is there anyway to fix it so that if the anchor is inside another tag, e.g. a h2 tag that it still works.
I was getting the accordion to collapse but the animation wouldn’t expand because my anchors were inside ‘s
hey is there a way to add a white line between the each entry???
Please help me out on this
I’m looking for a way to use two accordions on one page. Copying the demoscript on the same page only activates the first accordion. Anyone please?