Accordion v1.0 released
So I released by accordion class. It does both vertical and horizontal accordions as well as a number of other handy things. Check it out and feel free to help me get a MacBook Pro!
Colophon
Kevin Miller I love Ruby on Rails, Prototype and Scriptaculous. Together we can do wonderful things, stick around and lets make some really cool stuff!
Search
The archives run deep. Feel free to search older content using topic keywords.
Jul 13th 2007
Kevin,
One thing those other accordion scripts have is that the content is still accessible when javascript is turned off. Just taking a quick look at your example it appears that your script does not collapse accordion_content on load. You do that by initially setting the height to 0 in your css. This is not the best solution for someone browsing with javascript turned off since they only get a list of headings and the content is unaccessible.
Jul 13th 2007
Good point, I didn’t think of that in the 4 hours I spent on it
hehe I will add it this weekend.
Jul 14th 2007
Nicely done, I’ve been using Lightwindow on a project and it works a treat. I’m already thinking of ways to use the accordian as a discussion forum tool. Nice work.
Jul 14th 2007
hey,
sweet sweet thing you have. really enjoyed browsing though )
looking forward to borrow it to play at home.
good job,
sg.
Jul 15th 2007
Very good script! You’re such a great developer. It helped me too much. Thank you!!!
Jul 15th 2007
it doesnot worek for me. i tested with the following code:
test
Title
Lorem Ipsum Doler Lorem Ipsum Doler Lorem Ipsum Doler Lorem Ipsum Doler Lorem Ipsum Doler Lorem Ipsum Doler Lorem Ipsum Doler Lorem Ipsum Doler Lorem Ipsum Doler
pls help me!
~regards
Jul 16th 2007
Hi,
I have a similar problem as Adam.. I am developping a portal with multiple tabs and acordions. In the first tab loaded, everything is perfect ! But as soon as I click on a second tab, all my accordions are closed. (tabs are hidden divs). I think that if you solved this issue, everything would be perfect !
Thanks !
Jul 16th 2007
You guys might want to re-download it, I updated it today.
Kevin
Jul 16th 2007
Hey
Just wanted to let u know that it doesn’t seem to work on Opera 9 (noting happens when clicked). But the moo tools s reference u sited works.
Jul 16th 2007
Hey Kevin,
Its Awesome, Great Job at your end - this will helps me a lot in a project, and I would like to say to all developers in the globe that if we get any enjoy time just go a head and develop these types of snippets.
I am going to add this “Accordion” to my web-blog, just few days back I have written an article related to Accordions - so I am going to add this…. Cheers….Cool Stuff and Great Job Too….
Rock Up
Jul 17th 2007
Hi Kevin,
your scripts is awesome but I’ve a problem in ie6 (shit ie6).
If I use Accordion and Lighwindows (last version) the website lock (i think that you have use a common class and ie crash), in Firefox and Camino is all ok.
Jul 17th 2007
I think is my problem, I’ve put accordion and lightwindows in blank document and is ok also ie.
I ask to you two request :
1) if the Accordion is inside a DIV (column) with height 100% or auto the div do not resize.
2) is possible “round” the firs and the last panel? (apple style) I try apple css (a div absolute with png) work in fierfox but not in ie.
Thank’s
Jul 17th 2007
just in time for one of our projects… my boss was happy and just donated $5
Jul 17th 2007
Komx, yes it is possible to do all of that.
Jul 17th 2007
Hi, Kevin,
is possible open a specific accordion from outside button?
Congratulation very very good script.
Marcello
Jul 17th 2007
Marcello, see the example file, it shows you how to do that. I open them on page load but a button could do it as well.
Kevin
Jul 18th 2007
I was so excited to find your Accordion class, but it not work in FireFox on a Mac, even your page just shows everything open and nothing closes. I tried downloading it and testing it locally and I get the same results. It works fine in Safari but it completely fails in Firefox.
Any suggestions?
Thanks,
Michael
Jul 18th 2007
I just tested it in FF Mac and every other browser and it works? Did you get any errors?
Kevin
Jul 18th 2007
Thanks for the great script!
I was wondering if there was any way to toggle each accordion element without closing the others.
Thanks again,
-Stan
Jul 18th 2007
Well now it looks like it is working fine. There were no js errors when I checked it out earlier but it was hanging on google-analytics.com waiting for it to load. Maybe it was preventing some of the other scripts from loading. Who knows?? But it looks good now, I am going to start to swap out my existing accordion menu for your.
Excellent work!!! If the big guy likes the way it looks/works I will get him to donate to your Mac Fund. Everyone should have a Mac!!!!!!!
Jul 19th 2007
Hey Kevin,
I’m not sure about the lisencing. If I were to use your script for a commercial website, how do I credit you? And is using for a commercial sit even allowed.
Thanks in advance
Jul 19th 2007
Hey,
I modified the accordion.js code to show a specific accordion div to be open either with an effect or just static. All you have to do is add a class to the specific header for that div.
Contact me if you would like have a look. thanks.
Jul 19th 2007
Elli - You can use it for whatever you like. However a dontation towards the macbook fund is always appreciated
Brent - I’m game, but you have no contact info
Kevin
Jul 19th 2007
Hi,
I too have built a light weight accordion.
Its just 1KB! and has fade-in, fade-out highlight etc….
if you have time please check it
Jul 19th 2007
Really nice script!
There is room for improvement though…
Big Problem:
Increasing text size causes the content inside the accordion_content divs to grow outside the visible area. This is probably because in your css you set the property overflow:hidden; perhaps using display:none; would be a better option?
Small Details:
- It would be killer if you could click on an active header and collapse the content.
- There is a brief moment of flicker before all the divs are hidden, kinda unstable looking
Aside from that, this is one of the nicest, most unobtrusive accordion scripts I have seen (after months of research)
Kudos!
Jul 19th 2007
Navin Raj - Nice job, though it is missing some features mine has. On teh size mine it 4k, if I chose to compress it down with Dean Edwards Packer I am sure I could get it as small, but I prefer readability.
Stevie G - There is a new version this weekend that addresses all of that and some more, stay tuned
Kevin
Jul 19th 2007
Awesome news there Kevin!
Looking forward to it. Gonnasee if I can get my client to help you out with your Macbook problem there
Jul 20th 2007
Hey kevin,
Great work on the Accordion!! I like the vertical variant didn’t thought about that one.
I needed an Accordion with scriptaculous for a project the other day and was searching the web and couldnt find one so decided to make one as well
if you’re interested and want to see the code slip me an email and i’ll send it to you
Erik
Jul 21st 2007
Another cool idea:
Link to certain content divs with id attributes, so when you load the page with a URL such as
http://www.mysite.com/mypage.html#random
the #random div is already open.
Food 4 thought
Jul 23rd 2007
Kevin, your code inspired me to create the same thing but for tabs. Tabs with Prototype: http://blog.stereodevelopment.com/code/prototype-tabs/ Thanks for the inspiration and great work. -Scott
Jul 23rd 2007
I found another script that is pretty sweet:
http://www.learningjquery.com/2007/03/accordion-madness
The code footprint is a lot smaller and takes care of most of the issues I mentioned.
Still would be sweet to get that link action working but I’m a happy camper for now.
JQuery is a helluva lot more readable than Prototype, IMHO
Jul 26th 2007
Doesn’t work if content container has any padding
Jul 28th 2007
Just an observation that there is another nice feature that may be nice. For example, I have used the script and changed the images to include a arrow to indicate that you should press the tab to extend it.
The problem is that when you have javascript disabled the image of the arrow is still there. This could confuse users into thinking that you could press it as normal. What would be good is if there was an initial image with no arrow on it?
Jul 30th 2007
Hi, Good job !!
There is only thing that doesn’t work.. I have multiple accordions. Some are in hidden divs. If I want the first panel to be open by default, it works on the accordion that is shown. As soon as I show on of the accordions in the hidden div, the first panel is close… I try to figure out how to fix that, but I wasn’t able to do it…
Jul 30th 2007
Hi!
great script! How could I make a onmouseout on the whol accordion when I leave the main div area?
Thx for your feedback.
Dom
Jul 31st 2007
Hello! Good Site! Thanks you! ijivzkheawtzdf
Aug 1st 2007
Sorry Kevin,
I try to open an accordion with onclik “bottomAccordion.activate($$(’#bottom_container .accordion_toggle’)[0]);” but do not work.
What is the correct syntax?
Thank’s
Aug 1st 2007
Hey, great Script! nice Work!
I think about using it for my next project.
But i stll have one problem:
It´s not possible to toggle two content areas immediately after each other.
You have to wait until the first area is open before you can toggle the next one.
This is especially bad for onmouseover.
Thank’s for any hints
kalle
Aug 1st 2007
Sometimes I feel like I’m truley stupid. I have no background with javascript. I simply don’t know anything.
Many sites says “it’s as easy as this and then show some code”.
It would be ideal if there was an idiots guide.
Perhaps show some sample code?
I’m working on a person info site.
I wanted to use the accordion script so that if you clicked 5 stars, it showed 5 star hotels, you clicked 4 starts, it showed 4 stars etc…
see www.iloveqatar.net/sleep.html
I’ll glady donate to your Macbook fund if you could help me?
Aug 3rd 2007
Hi,
I played add this really nice script to my website.
But I’ve the problem, that the toggle areas are all open and don’t change on click.
I made a copy of this page and saved it on hard disc - there it works fine.
The only difference is that I use the base tag on the onlive version of the page:
I use absolute paths there so the javascripts should be found.
Do you have any idea to get it working with the bas tag?
Thnaks a lot!
Peter.
Aug 3rd 2007
Great script.
I have a problem. This runs fine in Firefox, but the accordion is fixed expanded in Internet Explorer. How can I get it to work in ie?
http://mathsduck.co.uk
Thanks
Aug 5th 2007
To help you with your fundraising, you might want to consider pledgie at http://www.pledgie.com/ . Just a thought.
Aug 6th 2007
It looks great, but I’m having one difficulty. I’m trying to put a flash movie in one of the accordion tabs. It shows up, but you can see it through all the other tabs as well since they are apparently transparent. Is there a way to embed it so it doesn’t show through all the levels? Thanks.
Aug 8th 2007
Tim: the accordion.js that’s part of the zip file is for some inexplicable reason different from the accordion that’s used on the site itself–try http://stickmanlabs.com/accordion/javascript/accordion.js. It works better, if not perfectly, with IE.
Kevin: what are your contact details? I can’t find your email address anywhere.
Aug 9th 2007
Kevin,
Thanks for the slick, free scripts. You mentioned a fix for the divs being open initially, did that happen? Thanks…oh yeah. $5 coming your way soon
Aug 10th 2007
Hi!
Great script, but I’m missing something. I want to place the content /above/ the title. So the drawer should be placed beneath the content, which is currently not possible with your script. An option would be nice
Aug 11th 2007
Hi! You’ve really made a great script. However, I still have one little problem. Like Geckow (above), but with a horizontal accordion. I’d like to have the titles on the right of the content, instead of on the left.
But still, great script
Aug 14th 2007
Somebody mentioned it above, but the following functionality would be extremely useful in many applications:
Can you please code the accordion to collapse the current selection if it’s clicked again? In other words, if “Option Two” is open, displaying its content, and you click the “Option Two” tab again, all tabs will now be closed.
Throw this functionality in, and I’ll send $20 your way toward the new MacBook Pro.
Thanks!!
Aug 15th 2007
Love the app.. I will totally donate the $5 to the cause if your able to help me figure out how the hell you can click on the active bar to make it close!
Thanks
Aug 20th 2007
the EVENT section is buggy..
what event should I write to get an HOVER effect?
Aug 22nd 2007
really a very nice tool, it works in every pc-browser and mac-browser I tested. but my opera 7.54 has problems with it. first it only shows all tabs, but not the first, after a few reloads opera shows all tabs open. (opera for pc, for mac it works)
has anyone else the same problem with the beloved opera 7?
Aug 22nd 2007
hi - it’s me again. I solved the problem in Opera 7, but I have a question. what about a print-version? in this version you only print the active content. maybe it would be nicer for users when all contents will be printed, wouldn’t it?
Aug 23rd 2007
Cool. 1 problem with the Horizontal script in ie6.
On some of the sections (the 2nd section primarily), the sections on the right display below the ones on the left.
Eg
section1, section2
section3, section4, section5
Aug 23rd 2007
hey, great accordion… sure beats the spry… will be making a donation once my project is finished
do you have a idea on how to keep my swf from breakout of the accordion (safari and firefox) ?
Aug 23rd 2007
I second Joseph and Steve’s requests regarding collapsing the content on the second click. Any progress on that front? Would be happy to make a donation myself.
Thanks
Aug 23rd 2007
Hi ! As same as Joseph who asked from a ‘Close Opened Accordion’ feature on the 14th august, I’ll need of this feature because I use accordion script to display a user menu on the top right of my site. And when I open an accordion, the site is no more aligned with the other boxes of the homepage/
So it will be a good thing to develop this function. Another use would be to close the menu after 6 seconds of non-use.
In all case, a very useful element with great effects !
Thank you !
Aug 26th 2007
Kevin -
Sweet script… I too wanted to be able to close open panels, so I added the code myself. I also added some code to hide all the panels while the page is loading.
All available here:
http://primedigit.com/accordion/
You’re welcome to update your version with these changes, and I’ll just change my site to point at yours…
-Will
Aug 27th 2007
Excellent WIll and thank you for your update.
I update it on my site and it works very well
Ciao.
Aug 28th 2007
This is really cool and simple to use. Perfect!
Can someone give me a hint how to solve the following problem:
I have some javascript based trees (like in windows explorer) in the panels. You can see it here: http://www.destroydrop.com/javascripts/tree/example/
If i open the nodes of the tree and it becomes larger than the panel itself, the bottom nodes disappear in the bottom of the panel. So i have to open another panel and then the first again to see the whole tree. How can I solve it, that the panels increase/decrease their size automatically if the content becomes larger/smaller?
Thx for any ideas!
Daniel
Aug 28th 2007
Will, thanks for sharing! Nice work
Aug 28th 2007
@Daniel::
(This is a bit of a hack because it only works for vertical accordions - I don’t have time to make it proper, but maybe someone else does)
I made a refresh method for accordion class:
refresh : function() {
var options = $H({
scaleX: false,
scaleY: true,
scaleContent: false,
transition: Effect.Transitions.sinoidal,
scaleMode: {
originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
}
});
new Effect.Scale(this.currentAccordion, 100, options);
}
Aug 28th 2007
One more thing… I needed to put a clickable trash-can icon in the header, so I put a link with an img inside, but didn’t work because the header was consuming the click event and preventing it from bubbling. Looking in accordion.js, if you change:
accordion.onclick = function() {return true;};
to
accordion.onclick = function() {return false;};
it will work. Not sure if this has any negative side effects but it works for me.
Aug 29th 2007
Love the script and totally excited about the horz. accordion! I know enough to be dangerous and am having the same issue as mentioned about with getting panels to open from an external button with the horizontal accordion. any help would br greatly appreciated!
Keep up the great work!
Aug 30th 2007
Can anybody explain to me how i can write html inside a panel with javascript? Right now because of the overflow the height does not grow
Sep 2nd 2007
Is there any chance of being able to tab through these panels for accessibility?
I’ve tried putting an anchor in the H3 tag hoping to allow users to tab through the panels if they are unable to click on them but didn’t have any luck.
If anyone has any ideas I’d love to hear them.
Sep 3rd 2007
It’s cool.
I have a question about how to add a link in accordion_toggle ?
Thank you.
Sep 4th 2007
Kevin, loved the accordion code, nicked it and modified it, i wanted it to collapse an open accordion element in addition to the behaviour you defined already.
modified js here http://www.continentalcareers.com/js/accordion.js
And a demo for the client here integrated into their existing site, soon to be completely overhauled (hopefully!)
http://www.continentalcareers.com/events/test/
Cheers…dave
Sep 5th 2007
Superb scripts. Thanks heaps for making these available to all. Got a quick question tho…
…is there any way to add lightwindow functions within the accordian - for example - the user clicks once to open an accordian panel revealing a link that can load a lightwindow in that panel (locking off the widths of the lightwindow content so as not to break out of the accordion container but allowing for various heights of content).
thanks
Sep 11th 2007
Saweet. Thank you for making this available.
Quick question, on the horizontal accordion how do you determine which ones opens first. Currently, the third tab is open by default. Is there an easy way to set the code to default to the 1st tab? I don’t know any javascript but am good at “tinkering”.
THankS
Sep 11th 2007
Thanks for the rad accordion.
I have a lame request: can you point me somewhere to learn about how to ignore clicks during effects? It appears you’re doing this, and i need to find out how, but have been finding nothing on google/wikis etc.
Any help would be very appreciated.
Sep 11th 2007
We’re using this code at work, and it’s awsome, thanks! One change we’ve made, however, is that since the accordions must by default have CSS that sets the height to 0px, once expanded the height will no longer be automatically adjusted - consider the example of an Element.show() being used within the accordion. Adding:
$(this.currentAccordion).setStyle({height: ‘auto’});
to the Effect.Parallel.afterFinish() callback seems to solve the problem, and it seems like the fix is general enough that it would be of use to most users of the accordion code. Alternatively, if there is now some way to initialize the accordion without setting height: 0px that would also resolve the issue.
Thanks again for the code!
Sep 11th 2007
Hey, thanks for the great script, sure beats the heck out of MooTools!
Anyways, I saw your example and noticed that you CAN nest an accordion inside of another (something I’ve been strugling with using other libs). Yours was horizontal, but I need to nest a vertical inside another vertical. So I did some quick changes to your CSS and boom, it worked.
Only one problem remains: resizing the panel. When I open the nested vertical accordion it overflows outside the bounds of the panel that contains it. Take a look at http://acrowder.untergeek.net/lab/scriptaculous/accordion1_1/ and look under the second tab (yes, I know, still looks like the example, I’m just trying to get it to work the way I want before making it my own).
I saw your refresh function and tried to implement it myself with zero succes. Do you think you could point me in the right direction?
Sep 11th 2007
Nice accordion script. I’ve made a couple of changes to it that allow opening an accordion by default (added an “openIndex” param to the constructor). Can I send it to you?
Sep 15th 2007
Does anybody know of a way to get multiple accordion’s to all of the first ‘tab’ open. Right now they are only letting me have one ‘tab’ open at a time, on all of my separate accordions. Thanks for any help! Check out my test page, you’ll see the problem –> http://bryanpearson.com/weed
Sep 21st 2007
Just saw Accordion v2.0. When you first click on the header, the content flashes before sliding down.. add to bug list..
Oct 18th 2007
Hi all
Is it possible to get a different background to every horizontal toggle bar?
I don’t want to change the js codes…
Ciao Valentijn
Oct 24th 2007
Hi Kevin,
good work with accordion,
jsut found a little bug when clicking on the same accordion title it opens first in whole size then starts the transformation.
I have done a fix, i can send it back to you, but unfortunately there was no email.
Keep up the good work!
-jp
Dec 8th 2007
Im looking at using this and have 1 quesiton. Is there anyway I can select on the load which panel opens?
Feb 23rd 2008
Hi, I’m wondering if it is possible to adjust the width and height as a percentage instead of hard coded in pixels? i’m trying to implement a “full screen” horizontal accordion. im trying to get the entire screen, except for a small 150px bar at the top, to be a large horizontal accordion. think xbox 360…ideally the horizontal toggle would only go as high as the screen allow, and if there is any content that’s too tall, then a scroll bar would be created for just that one pane, instead of having the toggle being as high as the content…sorry if this doesnt make sense, i’m not very good at explaining things.
P.S. I can’t code JS to save my life, so if this isnt currently possible without a lot of hacking, how much could i pay ya to make the modifications for me? i’m not rich but id be willing to throw down a couple buck via paypal…….
Feb 25th 2008
Great Work, I epspecially like the horizontal accordian which I have used here: http://www.5beans.co.uk its fairly easy to customise too. Keep up the good work.
Apr 1st 2008
Hey, thats great! you even copied the Mootools style and everything. One can see where your “inspiration” comes from…
Allow me to buy you a macbook for your herculean efforts!
Apr 8th 2008
Is it possible to have multiple content accordions visible at the same time? I’m trying to alter it so that layers stay expanded until the toggle is clicked a second time. Any suggestions?
May 2nd 2008
hi, any idea about why its crashing with jquery?? thanks
Aug 5th 2008
Hi Kevin
Thanks for your hard work; this is really cool. However, I need to dynamically add accordion content pieces. So, I need to recreate the accordion after doing this. If you just call “new accordion(’container’)”, when you click on the accordions that were already created, they will open repeatedly. I got around this by adding a ‘removeSelf’ method to the accordion object, which I then call before recreating the accordion:
// allow accordions to replace themselves:
accordion.prototype.removeSelf = function removeSelf(){
var accordions = this.currentAccordion.parentNode.getElementsBySelector(’.'+this.options.classNames.toggle);
accordions.each(function(accordion) {
Event.stopObserving(accordion, this.options.onEvent, this.activate.bind(this, accordion), false);
}.bind(this));
}
I thought I’d share that with you; perhaps you might want to think about it for the next version? I’m sure you can do it more elegantly, but I didn’t want to go redefining your initialize() method, so I did it this way.