PrimeDigit – A Design Blog by Will Shaver

August 26, 2007

Accordion Magic

Filed under: Javascript — Will @ 8:53 pm

Being a huge fan of anything that makes my life easier, I’ve been using scriptaculous for a while. I recently found stickman’s accordion and was very pleased with its performance compared to the asp.net ajax accordion. (Mostly I was pleased stickman’s version shows all content with scripts off while the asp.net one hides it.)

The only feature that was better in the asp.net version was the ability to close panels. So I added it.

Accordion v1.1

9 Comments »

  1. Thanks so much for adding the ability to close panels. It works great. I’ve been trying to find a replacement for the mootools accordion on our website (http://www.iconologic.com/) because it conflicts with the prototype library. I wasn’t going to be able to use the stickman accordion until it had this feature.

    Muchos Gracias

    Comment by Jason — August 27, 2007 @ 6:13 am

  2. Nicely Done Will!

    Comment by Ian Irving — September 5, 2007 @ 10:05 am

  3. [...] Accordion Magic Will has taken stickman’s accordion and added the ability to close panels, and code to keep contents hidden while page loads. Outstanding!!! [...]

    Pingback by Recent Code and the Culture of Code Links for Sept 5th | False Positives — September 6, 2007 @ 11:17 am

  4. Saweet. Nice with the closing ability. Quick question, on the horizontal accordion how do you determine which ones opens first. On your version the tab “Yes, you can close these panels too…” is the 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

    Comment by Ian — September 11, 2007 @ 9:04 am

  5. After I used your accordion.js in place of Stickman’s, I noticed it stopped working in IE 6. Is it confirmed to continue working IE 6? When I click my headers, the content divs to not slide down. This could be due to something I did, of course. My implementation is working fine in Firefox and IE 7for PC as well as FF and Safari for Mac.

    Comment by Jen — September 13, 2007 @ 11:16 am

  6. Hi Wil,

    Great work on this – thanks for your efforts…

    I’m just wondering how to stop the top panel from opening when the page loads ?

    cheers, Dave Porter

    Comment by Dave Porter — September 17, 2007 @ 11:35 pm

  7. Copyright primedigit.com eh? :)

    I am updating the accordion today and have added the features you added and cleaned it up quite a bit, check the project page soon!

    Thanks!

    Kevin

    Comment by Kevin Miller aka stickmanlabs — September 18, 2007 @ 3:27 pm

  8. Hi Will,

    I have tried to send a message to Kevin Miller for help but I haven’t received any reply from him. I really hope you would be able to help me.

    I have downloaded Accordion 2.0 and it is such as great program. I am using it for an A-Z directory with each tab labelling as A-B, C-E, etc.

    However, because users won’t know what subjects there are behind the A-B tab, they will have to click on it to know whether the subject they are looking for is there. I have created a “How to use this directory” tab as the first tab and wanting to know whether I can add hyperlinks within the content of this tab, and onclick, will open the relevant tab, i.e. open the A-B or C-E tab etc.

    I have tried using simple HTML anchor/bookmarks and that won’t work. Have also tried setting up the “A-B” link on the 1st tab to call the Javascript function to open “A-B” tab, but I couldn’t work out the code?

    Would you please be able to help me and tell me what code I should put in?

    Thanks a lot,
    Jimmei

    Comment by Jimmei — July 16, 2009 @ 7:08 pm

  9. Hi Will,

    I urgently need your help please!

    I have downloaded Accordion 2.0 and it is such as great program. I am using it for an A-Z directory with each tab labelling as A-B, C-E, etc.

    However, because users won’t know what subjects there are behind the A-B tab, they will have to click on it to know whether the subject they are looking for is there. I have created a “How to use this directory” tab as the first tab and wanting to know whether I can add hyperlinks within the content of this tab, and onclick, will open the relevant tab, i.e. open the A-B or C-E tab etc.

    I have tried using simple HTML anchor/bookmarks and that won’t work. Have also tried setting up the “A-B” link on the 1st tab to call the Javascript function to open “A-B” tab, but I couldn’t work out the code?

    Would you please be able to help me and tell me what code I should put in?

    Thanks a lot,
    Jimmei

    Comment by Jimmei — August 3, 2009 @ 5:21 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress