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.

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: http://q42.nl/spiffy/accordion
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.

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!

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.

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.

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.

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.

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

Lon-
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.

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

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 :(

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.

Kevin said:
—
Lon-
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

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?

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?