Monday, July 16th, 2007 Accordion

Category: Component, JavaScript, Scriptaculous

<>p>Kevin Miller is at it again, this time with an accordion component that likes it both ways…. horizontal and vertical.

Another accordion I hear you cry? This is what Kevin says to that:

Haha! Like there was one. Well there was, but only for Rico and a bloated one by mootools, that’s right I said bloated, live with it. For some reason there wasn’t one for scriptaculous but now there is. The why is pretty simple, just like every other library, I had a need for it. Hope you can get some use out of it. Accordion

Posted by Dion Almaer at 8:14 am

3.6 rating from 104 votes


Comments feed TrackBack URI

Very nice code (less than 100 lines, excluding comments)
Thanks for this contribution to the Prototype dev scene! 8)

Comment by jdalton — July 16, 2007

Great! I was waiting for this one!

Comment by Bart — July 16, 2007

isn’t more bloated as Mootools?

Comment by Rizqi_Ahmad — July 16, 2007

Rizqi: It says, “Bloated one **for** mootools…” It did not say mootools is bloated.

Comment by Robert — July 16, 2007

Nice try, but still no good…

What about visitors without JS? Why not serve them?
What about keyboard access? I can’t open/close panels using the keyboard.
What about keyboard access again? I can tab through the content of closed panels.

Maybe it’s time for a shameless plug:
This one has been lying around for ages… Maybe now it’s time to show how you can create a widget like an accordion without a single line of code:
This one’s unobtrusive, accessible, keyboard-navigatable, animating, completely stylable and so on…

It’s all about making abstractions at the right level.

OK, now shoot me.

Comment by Lon — July 16, 2007

not to nitpick but implementing an accordion using scriptaculous isn’t really rocket science.

spiffy however, thats the right thing and 100 times more worth than “copy and paste this code into your website”, as well from a point of learning new stuff.

Comment by markus — July 16, 2007

hahaha love that crappy spiffy. Keep your lame plugs to yourself.

Comment by Jack — July 16, 2007

I mus agree with Lon: what about accessibility?

Comment by Nikola — July 16, 2007

A very useful addition to scriptacolous. I was creating something similar for ordered lists exclusively, but never finished it.
I think I will use this accordion.

Just one thing, in case the author is reading this: Classnames are per convention written with an uppercase letter at the beginning.

Comment by anty — July 16, 2007

Why should he add a comparison with the MooTools Accordion, which is also less than 100 lines without comments? I like the moo.fx color theme, looks so familiar :D . Happy summer slump …

Comment by Harald — July 16, 2007

That is Moo.FX you are linking to not Mootools, which is a later release and has completely unbloated the accordion (to just about what you have here). Just wanted to be sure your facts were straight. Good job on the this integration to P/S. really useful!

Comment by Ryan — July 16, 2007

Huh. It’s weird how just moving things horizontal made me go “Woah, I can use that” when chances are I wouldn’t have used a vertical one.

Neat stuff. But, eh, scriptaculous? Personal preference here though.

Comment by Joe — July 16, 2007

1. I don’t see anything here that would present an Accesibility problem — nonJS users just see everything all at once.

2. I boycott everyone and everything that says BAM!

Comment by Marty — July 16, 2007

Rizqi – Hehe ;)

Ryan – Checked out the link, much nicer, I think the code could stand to be a bit more readable but thats just a personal preference. Thanks for the link!

Herald – Yeah it does look familiar, hmmmm, oh yeah… ;)

Lon – I fixed teh no JS bug and was aware of it last week and didn’t get a chance to touch till today. As for teh keyboard navigation I leave this up to the developer on purpose, why you ask? Because Unobtrusive and hijacking keys don’t belong together. Say for example they are using 2 other scripts that use the same shortcuts…. whooops, now I broke something! Adding them in and teh tab navigation is a minor task, this is a tool for a toolbox, not a plugin that you install and walk away. Hope this clears a few things up.

anty – I agree on the classnames and I don’t but thats why you can use your own and define them in the options.

markus – I could not agree more, but then one begs to ask, why hasn’t it been done and shown/released? The only ones I could find did not work and were pretty messy.

Thanks for the input guys, its appreciated!


Comment by Kevin — July 16, 2007

Marty –
As do I, that and the word ‘programmatically’ :) But then again I try to have a sense of humor when I write doc pages, otherwise they would never get written :)

Comment by Kevin — July 16, 2007

Hi Kevin,

I appreciate your directness and sense of humor.

What I meant by keyboard-accessible is not keyboard shortcuts, but simpe tab-and-enter/space behavior. If your panel-titles are links then you can reach them by tabbing. If you make sure that a click/enter/space of that link opens the panel then that accordion is keyboard accessible.

Furthermore: the content of closed panels should not be reachable using the tab key. The fact that it is in your demo makes the visible part of the page badly reachable by tab. Just apply a bit of display:none to closed panels…

I hope this clears up a few things for you as well.

Comment by Lon — July 16, 2007

hehe, I must say that “bloated” and “scriptaculous” are pretty much one and the same these days – it is a bit of a joke and I assume the comment was meant as such.

Comment by Colin Ramsay — July 16, 2007

No, not a joke, there is no such thing as a lightweight framework, only people who don’t know how to publish their files properly and how to configure a web server. To be honest, I think the only difference these days is the ability of the community using the framework and how files are published.


Comment by Kevin — July 16, 2007

An updated version is up!

Lon – I added in the display none, good catch. As far as the hyperlink enter functionality, I did not add it and leave it to the user. The reason why is you don’t need to use a hyperlink for this and without the accordion it is better to put in an anchor tag for a toc rather than a link. If then you wanted to open a slide based on an id in the url, simply detect it with js and open that slide as I show in the HowTo. To see how it degrades, just open it in FF and View/Page Style/No Style and you have a nice page with the appropriate headers.



Comment by Kevin — July 16, 2007

opera 9.22 die or didn’t work, unlike moo widget!

Comment by (v) — July 16, 2007

Actually I made an update 10 minutes ago and had an extra comma so it does work like moo widget!!!

Comment by Kevin — July 16, 2007

What about the “Accordion” for jQuery? Certainly not bloated. It’s my favourite.

Comment by johno — July 16, 2007

Would be interested in seeing this work with lightwindow!

Comment by Kimo — July 16, 2007

What’s this? Do my eyes deceive me? An accordion that can handle nested accordions out of the box?

Comment by Ryan Brooks — July 16, 2007

Is there plans to integrate this type of effects in Scriptaculous. This could avoid development of concurrent implementations of the similar effects.

Comment by Benoit Caccinolo — July 17, 2007

Why is it that, whenever a different framework is mentioned, someone always brings up the mootools framework. Are you guys that desperate in wanting to push this library, that you are even willing to become fools to do it?

Now, back on topic. This accordion is definitely nice and quick.

Comment by Viktor Kojouharov — July 17, 2007

it’s still no good since it shows itself completely expanded during load of the page… making it extremely ugly and discomforting.

i’m sorry.

Comment by Lon — July 17, 2007

On second thought, I am a complete idiot. I gargle mayonnaise!

Comment by Lon — July 17, 2007

For those that still think Scriptaculous is bloated, you can use the individual script files separately (effects.js for example). That combined with gzipping makes the filesize nominal.This has been mentioned time after time so I assume I need to talk slower and use illustrations which, unfortunately, is a limitation of this comment system.

Comment by Peter — July 17, 2007

No second thought from me…

Is it that strange and mayonnaise-like to remark that an accordion that during load of the page takes thousands of pixels in height just to collapse after a second, just to slide open a fraction of a second later is flawed?

I have cache disabled by default in order to test my own stuff, maybe that’s why I saw this and my alter ego didn’t?

Comment by Lon — July 17, 2007

@Lon – Couldn’t you hide the accordion in a div and not show it until load is complete?

@Kevin – Sweet accordion! Prototype/scriptaculous has too many haters these days :)

Comment by Joe Klotson — July 17, 2007

You were the one who asked me to open it up for accessibility ;) It is a simple task to have them closed on load, just add display: none to the style of the content container and there you go.

Thanks, and yes, I have noticed, but then again what kind of code have they written and what does it look like ;)


Comment by Kevin — July 17, 2007

Viktor Kojouharov –
Because mootools has so many fanboys out there making bogus claims about how much more lightweight it is and how much faster it is compared to others ;) Sadly enough fanboys always cause trouble :(


Comment by Kevin — July 17, 2007

johno: It works with lightwindow.

Comment by tack — July 17, 2007

mootools is great. the problem with it is not the code, but the development team.

Comment by Jones — July 17, 2007

Can someone please tell me how to use this in WordPress????

Comment by Eli — July 18, 2007

Great work Kevin. Also great comments on “no such thing as a lightweight framework”. Most frameworks (all mainstream ones?) allow you to pick and choose the components you want, letting you create the smallest possible files for each induividual project. The term “bloated” should be associated with “inexperienced developer”.

Honestly I would like to see someone rewrite a huge application without a framework and see if it is less “bloated” than a framework version of the same app.

Comment by justin — July 19, 2007

Kevin said:

You were the one who asked me to open it up for accessibility ;) It is a simple task to have them closed on load, just add display: none to the style of the content container and there you go.

I downloaded the example and added display:none to .accordion_content and then the containers just don’t show, even when you click to open them. Should the accordian be setting the display for that content on click?

Comment by Jesse — July 20, 2007

For others that didn’t want all expanded while the page was loading, I just set the height of .accordian_content in the example to 0px and that seems to work well.

Comment by Jesse — July 20, 2007

While this is cool, and great work, there is a lot of mootools bashing going on here. Epically when it doesnt really compare the the mootools version. that ondomready option that is available in mootools makes a hell of a difference

Take a look here:

fanboy out!

Comment by mark — July 26, 2007

Hello!!! thanks a lot, i use it now!

But please could you help me to use it with nested accordions? Because the problem is that parent div does not increase the height when opening child one.

NOTE: it should use using library

Any proposal or help? thank you in advance

Comment by Dav — August 7, 2007

This is rad. Thanks!

Would it be easy enough to turn give this a multiple open option? (instead of only allowing 1 open at a time, just allowing the user to open and close whichever they see fit?)

something like unique=no?

That would be a freakin’ lifesaver!

Comment by Jeff — August 14, 2007

I like your accordion widget and am using it in my rails website. Each section is filled with links. However, when I click on a link, I am redirected to a new controller/action (same session), and the default accordion item is selected again. I’d like the accordion to remain open at the same item it was on when I clicked the link. I figured that using a session variable
to track this information would work, but I cannot understand here in the accordion javascript code the index of the selected item is maintained. Any thoughts?


Comment by Gordon — August 17, 2007

i love it. it’s easy to use, also for javascript-dummys like me.

Comment by soophie — August 21, 2007

Gotta call bullshit on the “don’t wanna hijack keyboard inputs” excuse for ignoring accessibility. These controls should be accessible via keyboard by default with the option to turn keyboard navigation off (by the dev, for whatever ungodly reason). I have personally vetoed the use of scriptaculous for this reason at my previous company and will continue to reject its use until it focuses more on interactivity versus simple visual effects.

You can either keep making excuses or fix it. Your choice.

Comment by airhead — October 29, 2007

We’re currently using the accordion on a website section rebrand at work and have come across a bit of a problem. We’re using for displaying similar information that is aimed at different audiences, in one case: UK students and International students. The UK one is showed by default, but when a user navigates to this page from a country specific page we want it to open with the International one instead. I’m told there is a way of passing values in an href but can’t figure it out as I can only cope with javascript on an incredibly basic level! Anyone have any ideas?

Comment by Corinne — November 22, 2007

mootools is great

Comment by Daniel — November 23, 2007

I second Eli, I want to accordion my widgets.

Comment by mandrill — December 21, 2007

Guys has anyone noticed that this breaks with the latest version of scriptaculous/prototype?

Comment by stueynet — March 26, 2008

Yes, me!


Anyone got a fix for this?

Comment by TheyCreate — May 12, 2009

Leave a comment

You must be logged in to post a comment.