Accordion Tutorial on NETTUTS

Posted on by

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.  

  • Ibrahim

    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 .

  • http://www.drobertpease.com D. Robert Pease

    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.

  • berwanger

    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.

  • http://briancrescimanno.com Brian

    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.

  • http://www.zadrosolutions.com Dario

    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!!

  • http://www.zadrosolutions.com Dario

    Nevermind..figured it out..duh!

    Again..very nice!

  • berwanger

    Thanks, Brian.

    Sounds viable. I’ll give an onComplete a try.

  • Kyle

    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.

  • http://mtnconcept.com/free-tools/composants/menu-accordeon-avec-prototype-et-scriptaculous-836 Menu accordéon avec Prototype et Scriptaculous| Webmaster – Ressources et outils gratuits pour votre site internet – Free Tools| Free Tools, Le meilleur des outils gratuits pour webmaster

    [...] promotion très efficace pour votre blog !), un tutorial complet et précis pour mettre en place un Menu Accordéon. Tout est expliqué de a à z et vous pourrez très facilement le personnaliser à vos [...]

  • http://www.shameless-self-promotion.org/ Kumar Chetan Sharma

    And when I visit your website I see this Error establishing a database connection :(

  • bobby

    hi,
    I love this tutorial .. is it possible to add images in the accordion-toggle? I am trying different things, but can’t seem to get it.

  • bobby

    hey, i figured it out .. if i put a div in the accordion-toggle and set top: -10px or so .. it shows up in the right place.

  • Rob

    Hello berwanger,

    Wondering if you ever got your AJAX implementation to work w/the accordion? I am having the same problem you describe – i.e. not sure when to load the accordion.js file and/or instantiate it.

    Any help would be appreciated.

    Thanks.
    Rob

  • jil

    HI,

    strange behaviour!
    If a insert a flash in each accordeon content, the hided flash is desactivated !!!

    on other word, the flash not visible is desactivate…. some position of clip (drag) are retrun to zero position why ?

    regards

  • http://train.ed.psu.edu David Passmore

    I really like your solution to the accordion effect. I have implemented it on my page, http://train.ed.psu.edu . However, when the page loads, one of the accordion “folds” already is open. It is always the second panel. Is there any adjustment that I can make so that the starting position for the page is with all panels closed?

    Thanks, and best regards,
    David L. Passmore, @psu.edu" rel="nofollow">dlp@psu.edu

  • http://www.chaneloutletstores.com chanel

    Thanks a landlord it! I acquired yet some insight. Life is so colorful, we should be able to live in, such as Korea and honor the planet. Human life is like rivers, slowly flowing, flowing rivers, flowing through the snow, flows through the prairie and ultimately into the sea, return to the embrace of nature, start a new reincarnation. Allow us to feel the meaning of life will come only to those you have those memories http://www.cheap-nikeshox.com