Accordion Tutorial on NETTUTS

June 11th, 2008 by Brian Leave a reply »

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.  

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Reddit
  • StumbleUpon
  • Technorati
  • Twitter
  • DZone
  • HackerNews

Posted in Development

Tags:

You can follow any responses to this entry through the RSS 2.0 Feed. You can leave a response , or trackback from your own site.

Advertisement
  • 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, dlp@psu.edu
  • 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
  • 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
  • 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.
  • 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.
  • And when I visit your website I see this Error establishing a database connection
    :(
  • 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.
  • berwanger
    Thanks, Brian.

    Sounds viable. I'll give an onComplete a try.
  • Nevermind..figured it out..duh!

    Again..very nice!
  • 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!!
  • 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.
  • 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.
  • 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.
  • 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 .
blog comments powered by Disqus