Lightweight JavaScript Accordion with CSS

CSS, Javascript 106 responses so far

The updated accordion script is available here.

This JavaScript accordion is only 1.5kb. If you have a small project that could use an accordion and don’t want to include an entire JavaScript framework to do the job then give this script a try.

You will need to call the following function in your body onload where the first parameter is the div id of the accordion parent and the second tells the script which section to expand onload.

slider.init('slider',1)

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to download the source code.

Updated 5/27/2008 – Slightly minified the code cutting off 1kb and added the script into a global namespace.
Updated 6/19/2008 – Shaved of a few bytes and added change the “c” variable to identify which section to be expanded onload.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

  • Well done, the effect and animation are very elegant, especially for a framework-free script.

  • Very good. Why don’t you make all this accessible by the use of keyboard (tab + space/enter)? Accessibility is very important. And what about those who doesn’t have JavaScript enabled? Is this going to work?

    Sorry bad English.

  • @flashfs – I will take a look at incorporating keyboard navigation, thanks for the suggestion. If JavaScript is disabled all of the boxes would simple be expanded, it degrades nicely.

  • Sean Cheatham

    Hello Michael.

    Great work on this script. It works fantastically. I have it working in IE and Firefox perfectly. I have not tested Opera yet, but I do know that Safari has an issue with it. Upon hovering your mouse over the togglers, the toggler background turns a whitish color.

  • @Sean – Thanks for the comment. I had not noticed the demo on this page was gone (back now) but it does work in the latest version of Opera without any issues. Or you can go to http://sandbox.leigeber.com/slider.html. What version are you using? I will definitely check it out when I get a version from you.

  • Bas

    Hi,

    Works perfect, great script. Only thing is that it stutters al little in Firefox? But it’s really smooth in IE. Any ideas how I could sove that?

  • @Bas – The primary reason for that is the top two boxes have almost the same length of content. Check out http://sandbox.leigeber.com/slider2/slider.html which demonstrates a more realistic example where the content is of different lengths in each box and therefore the bottom bar has to move instead of just sitting in place and shaking. I updated the demo so it didn’t show the issue as badly. I have no idea why Firefox does it but to implement a fix would not be pretty. Definitely open to suggestions.

  • Bas

    Thx for the quick reply. Why wouldn’t it be pretty to implement a fix? 😉 If it would work just as smooth as it does in IE, that would be really nice.

  • @Bas – The end result would be pretty but my thoughts on how to alter the code to force it to look more fluid are not. Take a look at it in FF beta which will soon be released… very smooth. I imagine most FF users will upgrade very quickly as apposed to the rate at which IE users typically migrate. I will give it another look and if I find a resolution I will update the post. Thanks.

  • Great Idea!! I think that include it in my pages!! It’s tooooo easy!!

    Bye!!

  • Bas

    Nice. I’ll give FF beta a try, thx! Looking forward to it.

  • Pierluigi (Italy)

    Great!
    Only one problem with JS disabled: header 3 disappears completely :((

    (Win 2000 with Firefox 2.0.0.14 and web developer toolbar to switch JS on/off)

  • @Pierluigi – The demo above is in an iframe so when JS is disabled they are all expanded and therefore the last one expands below the height of the iframe. You can visit the page directly at http://sandbox.leigeber.com/slider.html to try again.

  • Pierluigi

    Well, you’re right!
    It would seem quite impossible you hadn’t tested it deeply 😉

    Thanks for your quick reply!

  • Henry

    But when I print the page out, I need all text to be printed. Please include CSS print styles that will ensure all text within the slider is actually printed. Can you do that? It would be perfect then 🙂

  • @Henry – It would actually not work as you are used to unless JavaScript is disabled. Since the JS goes through on page load and collapses the divs after calculating their heights any print CSS would be irrelevant. You could create a print button and call a function to expand all the divs and then call the window.print() function. Probably not what you are looking for but if you decide to go that route and need help just shoot me an email.

  • Pingback: fritz freiheit.com » Friday link dump()

  • Pete

    Is it just me, or does the text section look really terrible in IE6? Like it’s been scaled or something?

  • @Pete – Just tested more in IE6 and don't see any issues. The text looks just like it does in other browsers. If you could send a screenshot to me I can take a look. You might also try testing the slider directly at http://sandbox.leigeber.com/slider.html. Thanks for reporting the issue.

  • Pete

    Thanks Michael, have dropped you an eMail. The only difference I can see is I run IE 6.0.2900. I tried it on your direct link and again it looked bad. Pete

  • Pingback: plainbeta’s New Design - Pier 3 | plainbeta()

  • Buzz

    Hey Michael,

    This is a nice script and i would like to put it in a site.. With FF this is nice, but with IE (6 and 7), there is a weird thing.
    If you can take a look at http://www.gestisoft.net/ftps/nicolas/bdh you will see that “ANGERS” “PARIS” “SAUMUR” is very unstable on IE ..

    I dunno why

  • @Buzz – Your site is looking very nice. There are some issues with your markup which may be causing the issue. Try running your site through the W3C validator and you will see a number of errors. Right off I don't see anything in the accordion markup itself that raises any flags. Once you get it closer to validating shoot me an email and I will take another look if the issue persists.

  • Paul

    Michael – Can you have the accordion stay active (ie. with hover open) on certain pages? If you click within a submenu (which is what I am using it for) on the next page it closes the element.

  • @Paul – A little confused as to what you are asking, the answer is probably yes with some customization. You refer to it staying open until the next page opens… shoot me an email and a link so I can check out where you are so far.

  • Pingback: diploD » Blog Archive » Parlando di javascript..()

  • Abraam

    Great work! Can you do this same accordion, only horizontally? i would love to use it on a site.

  • dflynn

    Is it possible to alter the code so that all content is hidden upon page load?
    If so what might need changing?
    Thanks

  • @dflynn – You could just change the CSS, no need to alter the JavaScript. Shoot me an email if you have trouble.

  • dflynn

    Ahh! Got it, in the <body onload=”slider.init(‘slider’,1)”> tag, I didn’y realize I could change the 1 to a 0 to achieve this. Thanks for the help!

  • Tom

    this script seems to be having issues when i use paragrph tags in ie6 the bottom of the text gets clipped by around half a line.

    http://79.170.40.161/cncareers.co.uk/index.php?option=com_content&view=article&id=4&Itemid=10

    is this a known issue or do i need to make changes to the js? i have played around with it but cannot get it to display correctly in ie6.

  • @Tim – Shoot me an email with a zip of your accordion including the content. Should be able to resolve the problem in the CSS but it is hard to look into without your code in front of me, especially in IE6.

  • vVinceth

    Hi,
    How can i use it on a page that has a Master page
    Thanks,
    Winceth

  • vlad

    @Michael – Can you place a “+” when a tab is minimized and then just replace it with an “-” ?
    Thank you, you’re doing a nice job here.

  • @vlad – This could be accomplished through the CSS possibly or though JS. I don’t think I will be adding it to my accordion here, if you need help implementing it yourself shoot me an email.

  • Culvi

    Wonderful code and very diverse. I can use this on any type of site and it would look wonderful.

    Michael. Do you mind looking at this code and telling me why I cannot get my first slider to open using the “slider.init(‘slider’,1)”

    <div class=”colTwo” id=”slider”>
    <div class=”bloc_top”>
    <div class=”heading9″ id=”one-header”>
    <h2>HEADING</h2>
    </div>
    </div>
    <div class=”bloc” id=”one-content”>
    <div class=”image12″ ></div>
    <div class=”contentblock” >

    <p>CONTENT</p>

    </div>
    </div>
    </div>

  • @Culvi – Is the <div class=”bloc_top”> necessary? Shoot me an email with a link to your demo or a zip of the entire accordion code you are using.

  • Venky

    Michael,
    How difficult is it to convert this into a nested accordian? Have you dont this already?

    Thanks
    Venky

  • @Venky – I have not done it yet but it would not be a hard thing to do. Shoot me an email if you try it and run into problems.

  • jose.rojas

    I need 2 differents box in the same page, how I can make this?

  • Thanks for your great script. I have implemented it on my website (for the faq’s). But I have one question though. I noticed that the full content of the accordion is displayed in the browser when it loads the page. Once it is done loading, the script closes the accordion (with slider.init(‘slider’,0)). Is there anyway the script can be configured to not show the content of the accordion during load time ?

  • @Jan – Since the total height of the div must be calculated to pass into the animation function the content must be displayed at some point. In your situation it may make the most sense to calculate the height once a user clicks on a section and not onload. The calculation should happen so quickly you don’t see the flicker. Shoot me an email if you need help working it out.

  • Alain

    Michael – That is a great clean code! In your code, by default the first header is open (if enabled) – how can I make the second (or third, etc.) header open as default?
    Thanks, Alain.

  • @Alain – Shoot me an email and I can help you work through it. A little JS modification will be needed, nothing too difficult.

  • omega

    Is there a way to improve performance? i heard from multiple testers that this is very slow on their machines. like.. is it possible to increase the step size in the animation algorithm?

  • @omega – Sure, there are variables to speed things up but I cannot imagine there being a performance issue unless you are on an original Intel. Of course different browsers will handle the speed a little differently. Shoot me the details via email so I can investigate. Thanks.

  • Eddie G

    On the headers, is it possible to make the text alone a link to another page, but allow the box to activate the accordion?

  • @Eddie – Sure, you could just an an <a href in there. It might be a little confusing to work with though as a user.

  • This is some VERY nice scripting, Michael. And after having browsed several of your other JS utilities, in my opinion, you are light years ahead of most who consider themselves gurus. 🙂 What I am amazed at most of all is the SIZE of your JavaScript. Unbelievable!!?!! I found several accordions before discovering yours. One: http://dbajax.sourceforge.net/ … my GOD!…the amount of JS needed to run it (and not EVEN so smoothly) was a scary sight to see.

    But to revisit Jan’s posting (Jan Alphenaar on 16 Jun 2008 at 8:27 am) and your reply therein, with any page that has a lot of content…seeing the entire table loaded before the accordion snaps to the collapsed position is not so pleasant. If you are willing and have the time to share, I would be very interested to hear how it is possible to “calculate the height once a user clicks on a section and not onload”. I set-up a temp page with additional content below the accordion in order to see the delay before the accordion’s collapsed state: http://www.quikstage.com/test_slider.php

    Again…Awesome Coding!

    David

  • @David – Thanks for the feedback. Basically all the divs would initially have their display set to none. Then, the first time a user clicks and individual section the script would momentarily expand the section just long enough to calculate the offsetHeight of the div and then reset the height to 0px. Shoot me an email if you need help with the code.

  • Hello Michael…I attempted adjusting the class=”content” divs to display:none, but of course, this simply negates the ability to ever SEE those divs, right? 🙂

    I am thinking that there would need to be some sort of onclick command applied to the now hidden “content” divs in order to have them show again, am I right? And since these divs are all manipulated through ID’s in the slider.js file, I am also thinking that is where the manipulation would have to take place.

    Yes, thank you…if you can share with me how to code this, I am all ears. 🙂

  • the SaNdMaN

    Thanks for the script Mike, it works perfectly . . . one thing though, is it possible for expanded elements to stay expanded unless it’s clicked again?

  • @the SaNdMaN – Sure, you would just need to comment out a few lines of code. If you cannot locate what needs to be removed let me know and I will point you in the right direction.

  • Metcalfe

    Hello,
    Just a question : what have I to change on the code if I want the same effect with “onMouseOver” ? It is possible ?
    Thanks

  • @Metcalfe – That should be all you have to change, just the mouse event on line 10. If that doesn’t do it shoot me an email.

  • Henri

    I don’t know if this has been answered earlier, but here it goes. Is there a way to define the active accordion header. For example if I want a green background for the header of the active accordion but blue background for the non-active accordion’s header.
    I hope you understand my issue.

    Thanks in advance!

  • @Henri – I totally understand your question. Right now the headers are only using the :hover CSS property. To accomplish what you are looking for you would need to change/append the class name to the header within the JavaScript itself. Shoot me an email if you can’t figure out where to place the update in the script.

  • CX

    wondering about using this, but need to have all of the sections defaulted to closed.

    this possible?

  • AC

    I love the slider code – nice job!

    Sorry to return to a topic already covered (16 Jun 2008 at 10:35 am) but I don’t know enough about javascript to make the adjustments to not display the contents on load. Have you put in the time to make the adjustments and if so, would you be willling and able to email me adjusted code?

    Thanks!

  • @CX – Sure, remove line 13 and the else statement on line 14.

    @AC – Take a look at the source – http://sandbox.leigeber.com/slider5/slider.html

  • Thanks! Really cool and easy to implement as well!

  • Great code. Nice way you answered everyone’s questions too 🙂
    FYI added to delicious, digg, and stumble
    I will send you a link once I have it working in my new moodle-based website. Have a great weekend.
    Jamie

  • Hey, great code, and I have to give you a shout out for how quickly you reply!

    I could very well be having one of the greatest brain-farts in the history of mankind, but why doesn’t the javascript seem to refresh when I go to a page and return back using the browser’s back button as opposed to another link or direct absolute URL entry?

    Any click causes the accordion to close and remain unopenable…not a word. Non-expandable. That’s better.

  • anna

    I have the same question as CX on 07 Jul 2008 at 3:40 pm:

    I need to have all of the sections defaulted to closed.

    What exectly do I have to remove, because when I remove line 13 and the else statment in line 14, it doesn’t seem to work anymore.
    Kind regards,
    Anna

  • anna

    Sorry, I think I have suddenly found the answer. “block” in line 14 must become “none”

  • Is there a code here to have this feature reversed in a way. It would be very nice to have the content hidden on default and have to click a “header” to see whats inside each one.

  • marko

    Hi Michael,

    I’m very impresed with your work!

    This is what I was looking for 🙂

    I have one question: I would like to include two buttons (expand all and collapse all). So when expand all button is clicked, all divs become visible… and when collapse all is clicked, all divs collapse.

    Sorry if this question was raised berofe, but I haven’t found it.

    Best regards, Marko

  • Nate

    In the comments about the closed default position… I changed “block” to “none” per Anna’s suggestion, and the slider defaults are closed, and I just about have it near perfect… but when you do the initial click on the header, instead of the nice flowing animation, it snaps really quickly. Then, all other animations are smooth as expected. How do I get that initial animation to flow normally, as the following do when you select the header? I know it’s kind of picky, but the details really help polish the effect.

  • @brushie44 – Not exactly sure why the back button would keep the state… an onload even should run any time the page is hit not matter how. As for the second issue I would need a link to take a look.

    @Richard – I think anna figured that out in the commend right above yours. Take a look.

    @gianluca – I think it has to do with cleartype but I will look for your emails as I try and go through them tomorrow night.

    @marko – You could modify the current functions or just add another that loops through all the divs in your accordion parent and if it contains ‘-header’ then set its ‘-content’ counterpart to display:block and visa-versa.

    @Nate – After a quick glance it looks like on line 13 the others are getting their height set to 0px, you need to modify the script to set the first one to 0px as well.

  • I love this effect, but cannot seem to get it to work. Not sure why. It loads as expected (with the first one expanded), and when I click the header of either of the other two, it does, in fact, expand as expected. However, once expanded, none of the three will contract.

    Please note that I’m using this on an Intranet, which means two things: (1)I can’t show you my page, and (2)all users are on Windows XP Pro with IE 6. As far as I can tell, javascript isn’t turned off.
    I loaded your CSS code into my current CSS sheet. I left off only the BODY line. I kept the .js file as is, placed it in the same folder as the HTML page, and placed the SCRIPT tag in the HEAD section.

    I’m really scratching my head on this. I can’t imagine that missing BODY line from CSS is responsible. Is it the version of IE that we’re on?

  • Wow. I have spent about 3-4 hours examining your code and just don’t understand why it works for you and not for me. It’s exactly the same. I even placed that line about the BODY back into the CSS. The only thing I can think of is that I might have something else in my CSS that has the same name or ID, but I haven’t found anything and I have looked thoroughly.

    Ah well. It was a nice thought.

  • anna

    I agree with Nate, when line 14 set to “none”, it opens in a snap. I have set the script in the original state now, with no changes, and it works perfectly well when I make only one simple adjustment in the html-file: <body onload=”slider.init(‘slider’,1)”> must become <body onload=”slider.init(‘slider’,0)”>
    Then all the sections are closed when the page opens.

  • Susie

    Hi Michael, I’m having the same problem as David Carriger on 24 Jun 2008. When the page loads all of the content is visible for a second before closing into position. Could you possibly explain what needs to be changed in the code to fix this?

  • This is an awesome script. I’m using it to replace the script found at http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm. Your script is much smaller! One thing that I would like to know is why on ie6 and ie7 the text looks distorted. It is almost impossible to read. When visiting your page: http://sandbox.leigeber.com/slider.html the text is is distorted only on ie6.

  • mark

    hi,
    i’d like that when i open a slide, the previous one remains opened instead of closed.

    what can i change in the script to obtain this?

    thanks

  • Michael-

    Great script. I search through many scripts to find one that after my customization would work properly in all browsers. Well, I recently notice an issue with Safari. When I visit the page on my site the source code seems to load but nothing renders. Refreshing the browser doesn’t help. Now if I navigate away from the page and back…Voila, it works wonderfully. Got any thoughts?

    http://www.sidedishdesigns.com is the site. You can find the accordion at http://www.sidedishdesigns.com/links.html

    Thanks for your time.

  • panx

    Hi,
    i like to know if there is a simple way to have an a:active class in the accordion, so we can customize its appearance with css while it is open.
    hope understand! great script, so liitle code, thx anyway.

  • Ted

    Thanks for sharing. Are there any known compatibility issues?

  • panx

    Maybe i don’t explain very well in my first post.
    When the accordion is open the header is the same like it is closed. For example if I want a blue text color for the header of the active accordion but green for the non-active accordion’s header, i can’t do it.

    thx again.

  • Hi there, nice compact slider.

    I need to create a custom slider but with unequal content areas for a project I’m working on.

    Is there any chance of uploading an uncompressed version so I can follow the thought process

    mike?

  • Jason Rogers

    Micheal – awesome script!

    just wondering how easy it would be to add in (as panx mentioned) the ability to swap out things on the headers like text colour Background image/colour so that they persist on the “active” header – but would then revert to the default styling when you open another..?

    Its already a very aesthetically pleasing, not to mention compact menu 🙂

    Anyway, just something for you to consider

  • bhavya gupta

    images are not found, which has been mentioned in style sheet in source code which is been provided. can u provide those images.

  • bhavya gupta

    hey i forgot thanks only 🙂
    i have made use of this code for one of the website which I’m building.

  • Very great accordion menu. Easy to use and easy to manipulate. Great work!

  • Love the script, and thanks for making it available to all. I’m experiencing the same problem as others (zach for example): all the content appears in the first load, but then gets hidden. It looks like http://sandbox.leigeber.com/slider.html does the same, too. And I’d like to know how to make the active slider show that it’s active…

  • E

    Hasn’t anybody notice that this text looks funky when you display it? It gets all pixelated. Is there anyway to fix this?

  • Jason Rogers

    Ive found the best way to use this script is to use the DIV’s to wrap tables (which allows for more functional styling, use of more images if needed)

    Remove all styling from the DIV’s themselves (ie. border, padding, margin all set to zero) retaining only basic positioning and of course the overflow:hidden; styling (important) on the content DIV.

    how i lay the script out looks like this

    DIV slider

    DIV header
    TABLE (with desired heading layout)
    close TABLE
    close header DIV

    DIV content
    TABLE (with desired content layout)
    close TABLE
    close content DIV

    close slider DIV

    Make the tables as simple or as crazy as you like but i found this resolved all styling issues with the content 🙂 hope this was of use to those struggling to make it look right, any other display issues – refer to the example just to ensure you arent missing anything.

  • Magenta

    Impressive work, Michael, thank you!
    I have the same question as Abraam: how could I make this accordion horizontal? I’d like to use it as a menu on a website and it would be exactly what I’m looking for. Does anybody know what should be changed in a code?
    Greetz 🙂

  • Caspergrl

    Hi Michael, thanks for the great script! Forgive me if this has already been asked. I have your accordian script working beautifully on my page. Unfortunately, it’s embedded in a tabbed system where all of the content for all 6 tabs is listed in one page. Your accordian code is within tab 2. I have everything but tab 1 set to display:none; in the main div so they don’t show until their tab is clicked. Unfortunately, with this parent tab set to display:none; the accordian (a descendant div) will let me close the default open link but not open any of the others. If I remove the parent div’s display: none; the accordian works great but then tab 2’s content displays on tab 1. Any ideas? Thanks in advance for your help! I’m a big fan of your work!

  • Caspergrl

    Hi again, please disregard my message above, we got it working:) We set tab 2’s info to hide on page load with javascript when accessing tab 1 and set the display:none property for the parent div also in the Javascript. This allowed us to keep the display:none in place which made the slider work but also allowed us to hide the content on the first tab. Thanks anyway:)

  • TomC

    A very effectively done utility.
    Thanx!

  • Pingback: Animated JavaScript Accordion V2 - Web Development Blog()

  • Pingback: Animated Accordion Script Without Any JS Framework | Creative VOI()

  • Pingback: Animated JavaScript Accordion V2 « Mobile and Web Technology()

  • sassygirl

    Hi. I have been trying to get this script to work on my site as a side menu. I am wondering if anyone has been able to make an UL work in this and if so can you let me know how you did this? I got the list all set up but then the menu action quit. Now it is expanded all the time no matter what I do. Any help is appreciated.

  • REALLYY GREAT WORK !!! I COULDNT FIND HOW I CAN CHANGE THE WIDTH OF THE ALL SLIDES . THERE IS A WIDTH ENTERY ON CSS PARTS I CHANGED ALL ONE . BUT THAT EFFECT NOTHING …
    THANKS FOR YOUR ANSWER … PLEASE GIVE ME A DETAILED ANSWER BECAUSE I AM NEW AT CSS

  • sassygirl

    ignore my above question, somehow I got it working 🙂

  • Quick tip: To leave tabs open even when you click on other tabs just replace this line of code.

    else if(cd.style.display==’block’)
    {
    this.islide(c,-1);
    }

    with

    else if(cd.style.display==’block’&&h==d)
    {
    this.islide(c,-1);
    }

  • Isnt there any answer about width ??? how can i change the width of accordion ?

  • Did the IE6 text issue get fixed? It looks fine for me when the page loads, but when I click one of the other levels, all the text in the slider goes bold and looks down right awful. Only in ie6.

  • I noticed that the script works correctly on IE 6.0.2900.2180; but does not work correctly on others.

  • Crow

    How to create an active selection in this accordion?

  • hello guys,
    Im trying to apply a tabbed acordian to my site however i dont want to disrrupt the present layout.

    I have links at the top of the page that headshots, contact ect.
    I would like only the link that is pressed to be visiable at any time.
    The only part I wish to be visible when the page originally loads is my name.

    Can any body help?

  • Cbreeze

    I know I'm going to totally embarass myself with this question but – oh well….
    Can you give the code for linking the images to an html page? Thanks.

  • 1022ok

    thank you!!

  • thx

    hi, i wan all tab are closed, where i must edit the scripts??
    thx