Accordion Tutorial on NETTUTS
Several of the websites produced by Eden have become perennial favorites in my RSS reader, including FlashDen, PSDTUTS, and most recently, NETTUTS. Recently, I wrote a tutorial for NETTUTS that you can check out on their site, it's titled Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous. While you're there, I highly recommend checking out some of the other great content they have. Many talented folks have contributed tutorials for them, and the site is really establishing itself as one of the premier web development blogs online.
I am a User Interface Engineer working for AutoTrader.com in Atlanta, GA and I've been on this crazy ride called Web Development since 1997. Along the way, I'd like to think I've learned a bit and this is my forum to share it.
Hi Brian
All the accordion-content divs take the tall of tallest one plz is any modify to let every div take only its tall and thanks for your sharing .
I loved this tutorial. Very easy to follow, and great results.
Now if you could only do a tutorial on creating modal windows with scriptaculous and prototype.
Hey, Brian:
This is a great tutorial. I’ve been looking for a good Scriptaculous/Prototype accordion.
One question though … I’m trying to display an accordion inside a section that’s being added through Ajax. It’s an invisible tab with an accordion on it.
So onload there’s no “test-accordion” id in the dom.
What would you recommend … appending the header on the ajax call?
Any thoughts would be helpful.
Running script on the dom:loaded event is really only ensuring that the DOM exists when the script is run. If you’re adding that node to the DOM via ajax, simply instantiate the accordion as part of your Ajax callback after the nodes have been added to the DOM.
This is the best “accordion” tutorial I’ve seen!!
One question, how do I make the first pane be default instead of the second?
Great job!!
Nevermind..figured it out..duh!
Again..very nice!
Thanks, Brian.
Sounds viable. I’ll give an onComplete a try.
Brian - how can i make your accordian so that all menu options are closed on load? I have tried everything that I know and I cant get this to work. I want it so that all visitors have to click on an option prior to any content being shown. Thanks in advance man. Sorry to bother you as well.