Spry Accordion Panels’ Height and Open or Closed First Panel

In Dreamweaver, the Spry Accordion Panels have a default height which is fixed. If you don’t want to use this, or have unoccupied space inside the content panels you need to amend the javascript at the foot of the page:

<script type=”text/javascript”>
<!–
var acc1 = new Spry.Widget.Accordion(“myAccordion”,{useFixedPanelHeights: false});
//–>
</script>

Also, by default the first panel is open when the page loads. If you want to start with all panels closed here’s how:

<script type=”text/javascript”>
<!–
var acc1 = new Spry.Widget.Accordion(“myAccordion”,{useFixedPanelHeights: false, defaultPanel: -1});
//–>
</script>

other page


14 Comments

  1. chief ninja

    dude, this is just AWESOME! this has driven me absolutely bananas. Thank you, namaste, asante, gracias, merci, danke, ni-wega etc..

    • Stuart

      Glad it helped – frustrated me too for some time!

  2. jmm

    i just copy pasted this into
    dreamweaver code
    and it says there is an error with the
    <!–
    can you tell me whats up
    thanks

    • Stuart

      This is actually a comment, so it should be:
      at the end. Two dashes with no space.

  3. Ekram

    This is neat. Thanks for posting this.

    Is there a way to do this without changing the height coding? I just want the panels to start out collapsed without effecting the height of the panels. when I put “false” it changes everything 🙁

    Thanks for your time!

  4. Ekram

    Oops, sorry, I actually just figured out what I needed to change 🙂

  5. Bibi

    Thanks, even almost 4 years later still very usefull, thanks a lot. I’m happy. 🙂

    • Stuart

      Glad it is still relevant – and helpful!

  6. BrynD

    dude, you are the MAN. Thanks!

    • Stuart

      Time for a smiley! 😉

      • Ken

        Stuart:

        Great to see you still responding! Any suggestions on how to make the closed panel work with Dreamweaver CC and their JQuery UI accordion?

        • Stuart

          Ken,
          I’m still on Dreamweaver CS6 – haven’t upgraded because I haven’t used DW in a while… However, I found the jQuery UI widgets buggy and preferred adding the accordion directly from the jQuery UI site. To get round the auto height , set heightStyle: “content” which lets the panels keep their own height. See this page: http://jqueryui.com/accordion/#no-auto-height. There was a YouTube video (which may now be out of date) that is worth watching too: http://www.youtube.com/watch?v=igFUI3hMMBc

  7. Morilina

    not sure how long ago you posted this but THANK YOU!! those are the 2 questions that i needed answers for. ^_^

    • Haiz Design

      It was an old post but glad it is still helpful!

It's good to talk!

Your email address will not be published. Required fields are marked *