Wednesday, September 19th, 2007

Accordion 2.0

Category: JavaScript, Library

Kevin Miller has updated his accordion with a new release.

The new version also builds on and includes:

  • Open/Close functionality added (Click on an active accordion)
  • Nested Vertical Accordions
  • Accordions will dynamically resize on content added REAL TIME!



  1. // Horizontal example
  2. var horizontalAccordion = new accordion('#top_container', {
  3.     classNames : {
  4.         toggle : 'horizontal_accordion_toggle',
  5.         toggleActive : 'horizontal_accordion_toggle_active',
  6.         content : 'horizontal_accordion_content'
  7.     },
  8.     defaultSize : {
  9.         width : 525
  10.     },
  11.     direction : 'horizontal'
  12. });

Accordion 2

Posted by Dion Almaer at 6:39 am

3.6 rating from 51 votes


Comments feed TrackBack URI

sorry, please delete

Comment by ohaiyo — September 19, 2007

Looks good. What would be nice is an option to allow more than one accordion to be open at a time.

Comment by Alex MacCaw — September 19, 2007

Just semantics, but the download link on the page is still called ‘accordion 1.0’, however the zipfile it links too does actually have the v2.0 code :-)

Comment by Chris Chabot — September 19, 2007

Why is there a white ‘flash’ when you click on a tab when the accordion is fully closed, almost like it is quickly showing and hiding the contents before the contents is expanded..

Comment by KPR — September 19, 2007

I read his “why another Accordion” and all though it only works w\together with .Net and Mono there DO exist an Accordion built on top of ScriptAculous from before!
It can also handle dynamically resizing of content though the horizontal feature we’re left to implement as of yet… ;)

Comment by Thomas Hansen — September 19, 2007

All very well and good, but don’t you think he’s quite abrasively rude? If I wasn’t with moo, I wouldn’t use that on principal. He sounds like a child.

Comment by Marc Fowler — September 19, 2007

Not only is this a weak port from the mootools accordion, the design is also ‘inspired’ on moofx. In the accordion1.0 ajaxian post, Kevin says he took the design from his lightwindow page. He obviously based that one on lightbox after he made lightwindow based on it. It would be nice to see a little more imagination.

Comment by Tup Elocin — September 19, 2007

I’ve always wondered if accordions are used much in real life. I don’t see them being used much other than in Outlook clones and as AJAX demos.

Comment by Jordan — September 19, 2007

@Marc Fowler – Nice to see I am not the only one who finds the author’s verbage to be just plain rude. He is also, at a minimum, irresponsible (maximum = dishonest): His Lightwindow work is clearly something I will be using for profit, so being a good sport I made a significant donation – which was supposed to guarantee some form of support. Unfortunately for me, my one and only months-old post in his forum remains unanswered…

Comment by jtheis — September 19, 2007

It would be nice to see a little more imagination.

Maybe that will come after we’ve helped him to get his Macbook Pro, start donating!

Comment by Trulli — September 19, 2007

How is this news? I understand if this accordion had some sort of new functionality we hadn’t seen before … but this is just a clone of stuff that has been around for years.

Comment by Marat Denenberg — September 19, 2007

Hey guys, I think he’s just being a tad snarky, which is funny, not offensive. Especially in light of the (wonderful, productive) competition that exists among the various attempts at widgets that have proliferated recently. Count to 10, take deep breaths, lighten up, etc…

Comment by scrapper — September 19, 2007

Hello everyone-

I hope your mornings are going as well as mine.

Alex MacCaw – Not a bad idea, I will look into that.
Chris Chabot – haha, I fixed it, thanks!
KPR – It’s just how its setup, you can easily make that go away by adjusting the css for the content blocks.
Thomas Hansen – Good link! However the accordion on the site suffers from the jump problem when closing.
Marc Fowler – “quite abrasively rude”… oye, not I don’t think so, it’s my opinion of which I am entitled on my blog, however if I offended you, I apologize, though I still think mootools is a ripoff of better libraries (that’s a little more p.c. :) ).
Tup Elocin – Oh, I had no idea colors were copyrighted, even though mine are different! As for LightWindow, before you open your mouth next time, read the css sheet, I admitted to this because I liked the layout and was trying to help get LightWindow adopted. I think lightbox is a great script and deserves all the kudos it gets.
jtheis – Seriously, do you think I read every post in my forum, I have an admitted open door policy, so if you donated and need help, email me and I will more than happily help you and thank you for your donation, take some initiative man, you are getting my help at a micro-fraction of what I charge people, and I still help cuz I like giving back to the community.
Trulli – hehe, actually in the next month you will see a new website and a new project, imagination has already taken place :) Just putting it all together now and building an open source blog engine in rails with a buddy of mine (Robert Evans).
Marat Denenberg – uhm, its for scriptaculous and its a little library I shared, nothing terribly new, but spiffy none the less :)
scrapper – thank you, you get me.

Thanks for all the input guys, I always appreciate it!


Comment by Kevin Miller — September 19, 2007

At first when he mentions that this accordion is the first one for scriptaculous, I thought that he just didn’t look for it well enough because I’ve used an accordion for scriptaculous before; but when I found out that Lucas van Dijk’s great accordion script shows up in a simple search through scriptaculous site, I realized he’s plainly lying to make his script sound more original than it really is. Decent coding, but poor ethics is my opinion of this person.

Comment by elvision — September 19, 2007

Wow, must be a bad day for some people…. elvision, did it occur to you I just never found that one? Assumptions are the root of so many problems and mis-understandings. But I stand behind my original statement, the one you are referring to is BROKEN, it hops in IE, which is the problem with a lot of accordions out there. Only a few have solved that problem, open rico, me, and even mootools (disclaimer: to avoid another ethics attack, I am sure there are more that work as well ;))

Advice for the day, before you say something out loud, say it to yourself first…


Comment by Kevin Miller — September 19, 2007

elvision – I found the one you are talking about in the wiki, I found a different one earlier, so I admit I never saw this but from the looks of it and the timestamps and such, I think I never saw this because I built mine around the same time if not sooner. Most of the things I release, I release months after I build them, as I build them for my own projects.


Comment by Kevin Miller — September 19, 2007

why everyone uses always latin texts in the examples.
is there a depper meaning?

can someone explain me this please?

Comment by Noob — September 20, 2007

@Noob – the latin text is lorem ipsum:

Comment by ApocalypseCow — September 20, 2007

@Noob: Lorum Ipsum is the standard dummy text when making page layouts. Its used because it ‘looks like plain normal text’ but is not as distracting as a english text would be.

More info can be found (plus a nice dummy text generator) on

Comment by Chris Chabot — September 20, 2007

The accordion always struck me as being something of a “because-we-can” element.

IMnsHO it doesn’t provide anything to the user other than it needlessly hides information.

Comment by erlando — September 20, 2007

@erlando – or it provides more space for stuff while making the place look tidier. The glass is always half full, my friend.

Good work on this btw.

Comment by paul — September 20, 2007

KM – To answer your question: Yes, seriously: When you write things like “…and every request in the forum has been addressed and added.” you do give the impression that you actually read your forum posts. I guarantee that your forum would be less used if you included a message to the effect of “Do not be misled by my occasional answering of questions and my occasional providing of support to donators via the forum. I will in fact *not* be reading every post in the forum, even for those who donate. I require emailed support requests, even for those who donate.”

Comment by jtheis — September 20, 2007

Is it possible that when a user clicks on one of the menu headings and displays its drop down content, that it remembers its state from page to page? – I hope so!


Comment by David — September 23, 2007

How to make this available on wordpress post? Is there any tutorial about this?

Comment by indojepang — October 6, 2007

@KPR: I was able to fix the “flash” by changing “height: ‘auto'” in the deactivate function to “height: ‘0px'”. It works perfectly now – I love it.

Comment by Rich — October 7, 2007

To second David (3 comments up), would be nice for it to have “state awareness”. Are there plans for such a feature?

Comment by JP — October 25, 2007

@Rich: Thanks for the Fix. It works perfect.


Comment by Jesse — November 26, 2007

Hey, new user here. I have a question regarding this beautifully done accordian script you have made. (BTW, it is the best I was able to find in a 3 hour search)

Is it possible to apply unique classes/id’s (incremental, for example) to the title bars? I ask this for the horizontal accordian. The inability to apply text/unique background-images inhibits it’s potential in a productive type environment. Where the labeling of such titlebars is necessary to it’s usage.

ei: With the ability to apply special classes, one could make background png’s which are words, symbols, etc, to help classify the content in each tab.

Thanks for providing this awesome script. Did you ever score the MBP?

Comment by na3s — July 1, 2008

Actually, this accordion doesn’t work correctly in ANY browser I’ve tried. Hell, even the demo site doesn’t work correctly.

Click the same header twice and notice a big flash of content before it works. I made the change mentioned here (changed height: auto to 0px in the deactivate function) and that fixed it for firefox. But, not in IE.

Of course, when I have a test page with ONLY the accordion it works. But even on the author’s page you have the problem in IE7.

Comment by ShawnM — July 21, 2008

@Rich: Thanks for the fix!
@ShawnM: Shawn you must have messed up your configuration. On my page it works in IE7 (compat. view), IE8, FF and Gnome and prolly every other modern browser as well. It doesn’t work in IE6 however. I bet the IE6 developpers get so much bad Karma.

Comment by macolo — December 6, 2009

Leave a comment

You must be logged in to post a comment.