Setting Default Pane in Spry Accordion

When I first loaded the Spry Accordion, the first panel was the default one that came up when viewing the webpage. Since I have added some panels, a different panel is coming up as default. How do I change it so that the top panel goes back to being the default one. I appreciate all the help, I'm learning all of this (DW, Fireworks, CSS) as I go.

<script type="text/javascript">
     var ac1 = new Spry.Widget.Accordion("myAccordion",{defaultPanel:2});
</script>
The index starts at 0, so panel #2 (above) would make your 3rd panel the defaulte.

Similar Messages

  • Spry Accordion Panel Default State All Closed?

    Is it possible to set a group of Spry accordion panels so
    that all are closed by default?

    Steven_K wrote:
    > Is it possible to set a group of Spry accordion panels
    so that all are closed by default?
    Yes, a Google search for "Spry accordion all closed" brings
    up this as
    the first result:
    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
    David Powers, Adobe Community Expert
    Author, "The Essential Guide to Dreamweaver CS3" (friends of
    ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

  • Spry Accordion default panels

    Hello,
    I have been trying to get the panels on the Spry Accordion to open while on the corresponding pages. I have tried setting the default panel to the corresponding panel number, but that does not work. Right now I have all of the panels set to -1 so they are all closed initiall. The only one I get to stay open is when I set it to 0, then my first panel will stay open, but if I try 1, 2, 3, etc. nothing happens.
    I really appreciate any help with this, I am a student and this web portfolio is part of a requirement and I would love to get it so funtion properly.
    Thank you,
    Jessica
    here is my url
    http://jessicaallen.us/portfolio_2/index.html
    Here is what I have in my Accordion CSS styles
    @charset "UTF-8";
    /* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    .Accordion2 {
        font-family:"Trebuchet MS", Geneva, Arial, helvetica, san-serif;
        color:#666;
        margin-left:0px;
        margin-right:20px;
        width:260px;
        border:none;
        overflow: hidden;
    .AccordionPanel {
        margin-left: 0px;
        margin-right:20px;
        margin-bottom:0px;
        padding: 0px;
    .AccordionPanelTab {
        color:#666;
        font-weight:bold;
        font-size:14px;
        line-height:18px;
        background-color:transparent;
        border:none;
        margin-left: 10px;
        margin-bottom:0px;
        margin-right:-40px;
        padding: 0px;
        cursor: pointer;
        -moz-user-select: none;
        -khtml-user-select: none;
        text-align:right;
    .AccordionPanelContent {
        font-size:12px;
        line-height:14px;
        color:#666;
        overflow: auto;
        margin: 5px -40px 5px 20px;
        padding: 0px;
        text-align:right;
    .AccordionPanelContent p{
        margin-top:0.5em;
        margin-bottom:0.5em;
    .AccordionPanelContent p a:visited{
        color:#ff9a00;
    .AccordionPanelOpen .AccordionPanelTab {
        color:#f15922;
        background-color: #fff;
    .AccordionPanelOpen .AccordionPanelTabHover {
        color: #f15922;
    .AccordionFocused .AccordionPanelTab {
        background-color: #fff;
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
        background-color: #fff;

    Jessica,
    First of all, I hate you. Perfect web page design, perfect colour co-ordination, perfect drawings not to mention perfect age. It makes this old codger wonder where he has gone wrong 
    Having gotten that off my chest, the problem is that you have two constructors for the same object as per
    <script type="text/javascript">
    <!--
    var Accordion2 = new Spry.Widget.Accordion("Accordion2");
    //-->
    </script>
    <script type="text/javascript">
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false, defaultPanel: -1 });
    </script>
    Just get rid of the first one and apply the correct panel number, for example Fine Arts use
    <script type="text/javascript">
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false, defaultPanel: 6 });
    </script>
    Gramps

  • Spry Accordion No Default

    How can I set it so there is no default that shows up using
    the Spry Accordion script? I tried making the default number
    outside of the number of tabs I have but it won't work.
    Any ideas?
    Thanks :)

    in SpryAccordion.js just change this line ->
    this.defaultPanel = 0;
    for this one -> this.defaultPanel = null;

  • Spry Accordion default panel in Master Detail Page

    Hi everyone,
    First time post and need a little help.
    I created a SQL database and put the recordsets in a spry accordion panel as the master section. I have another spry accordion that is my detail section. When I open up the panels in the master section and click on any of the records, it updates the detail region just fine. I did this by passing the record set using php which I don't know, to the detail region. So far, great.
    What I now need to do is when I open a panel, I want that panel to stay open. This dosen't seem to work regardless what I do. I believe that in passing the recordset set between the two regions, it is refreshing the page. I tried using code to pass the panel number too but this is not working.
    Here is the an example of one of the panels.
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><h3>Doctor Who</h3></div>
        <div class="AccordionPanelContent">
            <table width="385" border="0" class="AccordionPanel" id="content1">
              <?php do { ?>
                <tr>
                <td >
                   <a id="content1" href="?recordID=<?php echo $row_Doctor_Who['prod_key_name']; ?>&panel=1"; > <?php echo $row_Doctor_Who['video_name']; ?></a>
                   </td>
                </tr>
                <?php } while ($row_Doctor_Who = mysql_fetch_assoc($Doctor_Who)); ?>
            </table>
        </div>
      </div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0, useFixedPanelHeights: false});
    -->
    </script>
    If someone can give me some pointers that would be great. I was also thinking of redoing my menus so when a user clicks on an entry, it will open up another page with that panel open or even going to another section of the same page. I'm not a php programmer and taken a beginners class in HTML and Javascript so if you can keep things simple that would be great.
    Thanks soo much for helping out if you can!

    PHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
    Having said that, you need to have a Spry dataset in your Accordion panel.
    By following these steps, you will be well on your way to achieving what you want.
    Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
    Create a SpryHTMLDataSet based on the HTML-table
    Use the data from the Spry dataset to create a master/detail region in your Accordion panel
    Just a few questions before I go into details.
    Have you set up a connection to a database, thus be able to retrieve the data?
    Why do you need an Accordion panel to show your data?
    Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
    Please come back here with your answers and we shall try to help you on your way
    Ben

  • Spry accordion panel won't open by default

    Here is my code for spry  accordion, I am trying to open the 1st inside accordion panel by default, i f not by default, as soon as its parent is opened, but none of them seems to work. Please let me know where I am going wrong.
    <div class="Accordion" id="mainAccordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab"> <a id="healthCheckAccordion" onClick=""><img align="left" src="/csm/view/include/images/healthicon.gif">Health Check</a></div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab"> <a id="configurationAccordion" onClick="sysAcc.openFirstPanel()"><img align="left" src="/csm/view/include/images/conficon.gif">Configuration</a></div>
    <div class="AccordionPanelContent">
    <div class="Accordion" id="main2ndAccordion" tabindex="1">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">    <a id="systemAccordion" style="color:#ffffff;background-color: #2F5882;">System</a></div>
    <div class="AccordionPanelContent">
    <a id="kernelParamsAccordion">Kernel Parameters</a><br/>
    <a id="diskUsageAccordion">Disk Usage</a><br/>
    <a id="fileSystemAccordion">File System Statistics</a><br/>
    <a id="osPatchesAccordion">Os Patches</a><br/>
    <a id="networkAccordion">Network</a><br/>
    <a id="userLimitAccordion">User Limit</a><br/>
    <a id="environmentVariablesAccordion">Environment Variables</a><br/>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">    <a id="productName" style="color:#ffffff;background-color: #2F5882;"></a></div>
    <div class="AccordionPanelContent">
    <a id="odbcAccordion">ODBC</a><br/>
    <a id="bitmodeAccordion">Bitmode</a><br/>
    <a id="versionAccordion">Version</a><br/>
    <a id="licenseInformationAccordion">License Information</a><br/>
    <a id="dumpshrAccordion">Dumpshr</a><br/>
    <a id="dblistAccordion">DBList</a><br/>
    <a id="showtimeAccordion">Showtime</a><br/>
    <a id="serverStatusAccordion">Server Status</a><br/>
    </div>
    </div>
    <script type="text/javascript">
    var sysAcc = new Spry.Widget.Accordion("main2ndAccordion",  {defaultPanel: 0, useFixedPanelHeights: false });
    </script>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var mainAcc = new Spry.Widget.Accordion("mainAccordion",{ defaultPanel: -1, useFixedPanelHeights: false });
    </script>
    </div>
    Also the System panel, with id="systemAccordion" takes 2 clicks to open, every 1st time the page loads

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
    <style>
    #Accordion2 .AccordionPanelTab {
         background-color: #CCCCCC;
         color: #FFFFFF;
    </style>
    </head>
    <body>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><img src="/csm/view/include/images/healthicon.gif">Health Check</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><img src="/csm/view/include/images/conficon.gif">Configuration</div>
        <div class="AccordionPanelContent">
             <div id="Accordion2" class="Accordion" tabindex="0">
               <div class="AccordionPanel">
                 <div class="AccordionPanelTab">System</div>
                 <div class="AccordionPanelContent">
                <a href="#" id="kernelParamsAccordion">Kernel Parameters</a><br/>
                <a href="#" id="diskUsageAccordion">Disk Usage</a><br/>
                <a href="#" id="fileSystemAccordion">File System Statistics</a><br/>
                <a href="#" id="osPatchesAccordion">Os Patches</a><br/>
                <a href="#" id="networkAccordion">Network</a><br/>
                <a href="#" id="userLimitAccordion">User Limit</a><br/>
                <a href="#" id="environmentVariablesAccordion">Environment Variables</a><br/>
              </div>
               </div>
               <div class="AccordionPanel">
                 <div class="AccordionPanelTab">Product</div>
                 <div class="AccordionPanelContent">
                <a href="#" id="odbcAccordion">ODBC</a><br/>
                <a href="#" id="bitmodeAccordion">Bitmode</a><br/>
                <a href="#" id="versionAccordion">Version</a><br/>
                <a href="#" id="licenseInformationAccordion">License Information</a><br/>
                <a href="#" id="dumpshrAccordion">Dumpshr</a><br/>
                <a href="#" id="dblistAccordion">DBList</a><br/>
                <a href="#" id="showtimeAccordion">Showtime</a><br/>
                <a href="#" id="serverStatusAccordion">Server Status</a><br/>
              </div>
               </div>
             </div>
        </div>
      </div>
    </div>
    <script src="SpryAssets/SpryAccordion.js" ></script>
    <script>
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: 1, useFixedPanelHeights:false});
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", {defaultPanel: 0, useFixedPanelHeights:false});
    </script>
    </body>
    </html>
    Gramps

  • Spry Accordion closed tabs by default

    Hi, I have some issues with my spry accordion widget. I'd like to have all my tabs closed by default by using this code:
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("linklist", { defaultPanel: -1} );
    </script>
    and seems that this doesn't work. All my tabs are closed thats true, but, when I click on them, they doesn't open at all. When I change it to "defaultPanel: 0" the widget works fine, but the first tab is opened as the code says.

    You are addressing Accordion1, but not showing that id in the variable construction. Here is a similar implementation where all the panels begin closed:
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1});
    //-->
    </script>
    Usually, in the default Accordion Widget, the id of the Accordion is also used for the variable that constructs the widget. Note that I have also inserted the 'useFixedPanelHeights: false attribute:value pair.
    Beth

  • How to make no panels on Spry accordion open by default?

    I have a Spry Accordion with several panels.  I want the default behavior for none of the panels to be opened until one is clicked.  Currently the default behavior is for the first panel to be automatically expanded when the page is first visited.  How do I correct this?

    It's here:
    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
    Under the sub heading "starting with all panels closed".
    <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
    </script>
    Martin

  • Can one set "Navigation Pane Buttons" Left Sidebar to 'Default Hidden' and 'Not Open' upon opening Any .pdf document?

    Can one set "Navigation Pane Buttons" Left Sidebar to 'Default Hidden' and 'Not Open' upon opening Any .pdf document?

    Photoshop has to have full administrator rights to have read/write access.
    This means you need to run Photoshop CS5.1 in an Administrator account and set it up to "Run as Administrator."
    1. Close Photoshop if it's open.
    2. Right click on your Photoshop CS5.1 launch icon then select "Run as Administrator" from the context menu. (You will have to enter Admin Password if UAC is enabled to change this setting.)
    3. Launch Photoshop CS5.
    4. See if you create and save a document.
    Even if you are in an Administrator account you have to do this as Vista's Admin account isn't really the Super Admin as it is in XP so you have to elevate the rights by selecting "Run as Administrator". This setting is sticky so you should only have to do this once. I am not sure why CS3 is suddenly acting as if it does't have Admin rights unless you are running it in a new account that isn't an administrator or maybe uninstalled (cleanScript?) then reinstalled.
    If can't create or save a document, check that the account that Photoshop is in is an Administrator account.
    To check if you are in an Administrator account...
    1. Type user account in your Vista or Windows7 start search bar. (Start search bar is at the bottom of the panel that opens when you click the start Windows start globe located on the far left hand side of your Windows task bar.)
    2.  Click on "User Accounts" which should show up at the top of the list. This will open the dialog to User Accounts where you can "Change Your Account Type". If UAC (User Account Control) is turned on, you will need to enter the Admin password to change this setting.

  • How can I make the spry accordion remember the panel open when I refresh the page or jump to a new page?

    How can I make the spry accordion remember the panel open
    when I refresh the page or jump to a new page?
    I am using the accordion feature on all my pages as a
    navigation aid. It has three panels. When you refresh the page the
    panel goes back to the default pane... Is there a way of
    controlling this so that the browser can remember the pane that is
    open (say set a variable, cookie, other?)

    Look for "Set the default open panel" on the following page:
    http://labs.adobe.com/technologies/spry/articles/accordion_overview/index.html
    Keep in mind you would need to change that bit of code on
    every page. The only way to do it more dynamically would be to
    include a custom javascript or PHP/ASP style script in order to
    change the value.

  • Using an image as label in Spry Accordion Menu

    I was wondering if it was possible to use an image instead of
    text in the spry accordion menu. I have replaced the text that is
    there with a roll-over image link however I'm unable to label it
    since it uses the text as the label and therefore can't set the
    default panel I want opened. Is there a way to do this? Thanks for
    your help.

    Stefaan Lesage wrote:
    Is this possible with Pages 09 ? And can I achieve this ?
    Is it possible to look at the Help or at the Pages User Guide
    In the English one, page 17, we may read:
    • Some graphics, such as watermarks or logos, appear on pages. These objects are called master objects. If you cannot select an object in a template, it’s probably a master object. To learn more, see “Using Master Objects (Repeated Background Images)” on page 60.
    You can drag or place objects on a page, including imported graphics, movies, and sound, or objects that you create within Pages, including text boxes, charts, tables, and shapes.
    You can also insert pages that have been preformatted for the template you’re using. Click Pages or Sections in the toolbar and choose a template page. The new page is added immediately after the page where you placed the insertion point.
    Yvan KOENIG (from FRANCE vendredi 27 février 2009 23:01:32)

  • Spry Accordion Hover/Active Issue

    I have designed a spry accordion widget for a FAQ page and within Dreamweaver CS6 it is fully functional.  The color I've selected doesn't occur with a hover or an active tab once EVERYTHING is uploaded.  Below is a live link to the problem page, my Spry CSS and layout CSS as well as a screenshot of the proper functionality occuring in Dreamweaver.  Thoughts?
    The problem page:
    http://pauldhart.com/RideTTF_website/faq.html
    Spry CSS
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
        overflow: hidden;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
        border-top: solid 1px black;
        border-bottom: solid 1px gray;
        margin: 0px;
        padding: 2px;
        cursor: pointer;
        -moz-user-select: none;
        -khtml-user-select: none;
        background-image: url(/content-opaque.png);
        background-attachment: fixed;
        background-repeat: repeat;
        font-family: Verdana, Geneva, sans-serif;
        color: #FFF;
        background-color: #300;
        font-size: 12px;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
        margin: 0px;
        padding: 2px;
        background-image: url(../infobkgd.png);
        background-attachment: fixed;
        background-repeat: repeat;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        color: #FFF;
        overflow: hidden;
        height: 40
    [x;
        height: 100%;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
        background-color: #000033;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
        color: #FFFFFF;
        background-color: #003;
    .AccordionPanelOpen .AccordionPanelTabHover {
        color: #FFFFFF;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
        background-color: #003;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
        background-color: #000033;
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    Layout CSS
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Donate Today!</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="_css/donatepage.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryMenuBarDonate.css" rel="stylesheet" type="text/css">
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="respond.min.js"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <div id="header"><img src="RTTF-banner.jpg" alt="Ride to the Flags VI"></div>
      <div id="navigation">
        <ul id="donatemenu" class="MenuBarHorizontal">
          <li><a href="profile.html">home</a>      </li>
          <li><a href="theride.html">the ride</a></li>
          <li><a href="donate.html">donate</a>      </li>
          <li><a href="#" class="MenuBarItemSubmenu">gallery</a>
            <ul>
              <li><a href="photo-gallery.html">photo</a></li>
              <li><a href="video-gallery.html">video</a></li>
            </ul>
          </li>
          <li><a href="faq.html">FAQs</a></li>
          <li><a href="contact.html">contact</a></li>
        </ul>
      </div>
      <span class="AccordionPanel">
      <div class="AccordionPanelTab"></div>
      </span>
      <div id="faq-content">
        <div id="faq-accordion" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Is this ride still going on?</div>
            <div class="AccordionPanelContent">A: Yes</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is the date for this year’s ride?</div>
            <div class="AccordionPanelContent">A: Saturday, September 7th.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What time does check-in/registration open?</div>
            <div class="AccordionPanelContent">A: Online registration will begin in May.  Check-in at 8:00am on September 7th.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Where is check-in?</div>
            <div class="AccordionPanelContent">A: Check-in will be just south of PCH on Las Posas Rd (right before Gate 3 of the Naval Base).</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will the route be the same?</div>
            <div class="AccordionPanelContent">A: We have changed the route this year few a few reasons.  You can visit the route map to see.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: We’re not doing the ride but we would like to come out and watch the bikes as they drive by.  What time will you be on our street?</div>
            <div class="AccordionPanelContent">A: Given our start at 10:30am, we will be reaching the following streets at these times:</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is the minimum amount to give to ride in this ride?</div>
            <div class="AccordionPanelContent">A: $35/rider $20/passenger</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What does that give me?</div>
            <div class="AccordionPanelContent">A: Patch, Food ticket, and drink ticket</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Why must we raise/give a minimum amount this year?</div>
            <div class="AccordionPanelContent">A: As you know, for the first five years, the Ride to the Flags ran on an any-donation-goes basis.  However, as we got larger, the costs associated with putting the ride together grew immensely.  The minimum donation allows for us to cover the costs for the ride.  However, we try our best to bring on as many sponsors as possible to help cover our costs so that we can ensure that your donation is going to good use.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can I give more money than the registration fee?</div>
            <div class="AccordionPanelContent">A: Of course. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What if we raise a lot of money for the cause?</div>
            <div class="AccordionPanelContent">A: The White Heart Foundation is giving out some small prizes for our top donors.   Those will be announced at a later date.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: How will check-in be different now that there is pre-registration?</div>
            <div class="AccordionPanelContent">A: There will be a pre-registered check-in line and another line for those looking to just show up the day of.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What kinds of payments are accepted?</div>
            <div class="AccordionPanelContent">A: We prefer you use our online fundraising application Razoo.com that can be found on this website for your pre-registration. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I ride a trike, can I participate?</div>
            <div class="AccordionPanelContent">A: Yes</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Are scooters allowed?</div>
            <div class="AccordionPanelContent">A: Eh, sure, why not?</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will there be celebrities in attendance?</div>
            <div class="AccordionPanelContent">A: Probably.  We usually do not know about their appearance ahead of time. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Are you getting tired of all of my questions?</div>
            <div class="AccordionPanelContent">A: A little</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is happening on the base now that the Celebration of Freedom is at the end of the ride?</div>
            <div class="AccordionPanelContent">A: Memorial service and wreath laying and maybe a special guest.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will there be live music at the Celebration of Freedom?</div>
            <div class="AccordionPanelContent">A: There will.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I don’t ride a motorcycle but can I still come to the Celebration of Freedom?</div>
            <div class="AccordionPanelContent">A: Yes.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is my cost?</div>
            <div class="AccordionPanelContent">A: General Public $40. Student $20.  Bikers the day of $40.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: If I preregister for the ride and decide to just come to the Celebration of Freedom at the end of the ride, will I get my free patch, food ticket, and drink ticket?</div>
            <div class="AccordionPanelContent">A: No.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What are costs of food and drink tickets?</div>
            <div class="AccordionPanelContent">A: Food - $5,  Drink - $2,  Beer - $5</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: WAIT?! THERE’S GOING TO BE BEER?!!!!</div>
            <div class="AccordionPanelContent">A:  Yes.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: That’s awesome.  I love you.</div>
            <div class="AccordionPanelContent">A: Control yourself.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Will there be vendors during the Celebration of Freedom?!</div>
            <div class="AccordionPanelContent">A: Yes! For the first time ever, we give to you….motorcycle vendors.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I'm a vendor, how do I reserve a spot?</div>
            <div class="AccordionPanelContent">A: Click here and fill out our application.  It’s a lot easier than taking the S.A.T.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can I sponsor the Celebration of Freedom?</div>
            <div class="AccordionPanelContent">A: Certainly!  Click here for our sponsorship packet.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can my motorcycle club ride together?</div>
            <div class="AccordionPanelContent">A: If you come together, sign in together, and hold hands.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Are we doing big flags up front this year?</div>
            <div class="AccordionPanelContent">A: Yup</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Last year the riders got split up, how are you fixing that this year?</div>
            <div class="AccordionPanelContent">A:  We’re filing certain permits and paying astronomical fees to shut down traffic for 30 minutes on a Saturday so that we don’t get split up.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Last year the ride ended up being really slow, will it be slow this year?</div>
            <div class="AccordionPanelContent">A: We admit it was slow.  We know, we know.  Now that we are closing the roads as we all move through, we’ll be allowed to pick up the pace a little.  Also, the new route allows us go faster through town.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I'm a police officer but will be riding as a civilian. Can I bring my firearm on base?</div>
            <div class="AccordionPanelContent">A: The base will not allow that.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I want to create a donating team, where do I start?</div>
            <div class="AccordionPanelContent">Content 34</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: Can I start a donating team for my motorcycle group to cover all our registration costs?</div>
            <div class="AccordionPanelContent">A: Negatory.  Every individual is his/her own team. </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: I don't have a motorcycle, can I still attend?</div>
            <div class="AccordionPanelContent">A: Yes, you can attend both the event at the Naval Base and the Celebration of Freedom in Malibu.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Q: What is the WHF?</div>
            <div class="AccordionPanelContent">A: The White Heart Foundation was created to help support our community military, police, and fire.</div>
          </div>
        </div>
      </div>
      <div id="footer">This is the content for Layout Div Tag "footer"</div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("donatemenu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var Accordion1 = new Spry.Widget.Accordion("faq-accordion");
    </script>
    </body>
    </html>
    Screenshot of how it looks locally in Dreamweaver:

    SpryAccordion.css
    You have an error that is killing the rest of your code shown below in red.  Remove it.
    .AccordionPanelContent {
        margin: 0px;
        padding: 2px; /**suggest using 12px or more**/
        background-image: url(../infobkgd.png);
        background-attachment: fixed;
        background-repeat: repeat;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;  /**suggest using 16px or more**/
        color: #FFF;
        overflow: hidden;
        height: 40
    [x;
        height: 100%;
    Nancy O.

  • A simple Spry Accordion Question (I think)

    Hi all:
    I've searched but can't find, but I think this is a simple one.
    I've created a basic Spry accordion menu with DW/CS3 - Insert/Spry/Spry Accordion. How do I get the first "Content 1" to be hidden/not visible upon page load. Right now, the "Lable 2" must be clicked to hide the "Content 1" which of course shows the "Content 2"? Guessing it's in the JS, but I'm not sure. TIA for any help. HTML and JS Code below.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>
    JAVASCRIPT
    var Spry;
    if (!Spry) Spry = {};
    if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.Accordion = function(element, opts)
        this.element = this.getElement(element);
        this.defaultPanel = 0;
        this.hoverClass = "AccordionPanelTabHover";
        this.openClass = "AccordionPanelOpen";
        this.closedClass = "AccordionPanelClosed";
        this.focusedClass = "AccordionFocused";
        this.enableAnimation = true;
        this.enableKeyboardNavigation = true;
        this.currentPanel = null;
        this.animator = null;
        this.hasFocus = null;
        this.duration = 500;
        this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
        this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
        this.useFixedPanelHeights = true;
        this.fixedPanelHeight = 0;
        Spry.Widget.Accordion.setOptions(this, opts, true);
        // Unfortunately in some browsers like Safari, the Stylesheets our
        // page depends on may not have been loaded at the time we are called.
        // This means we have to defer attaching our behaviors until after the
        // onload event fires, since some of our behaviors rely on dimensions
        // specified in the CSS.
        if (Spry.Widget.Accordion.onloadDidFire)
            this.attachBehaviors();
        else
            Spry.Widget.Accordion.loadQueue.push(this);
    Spry.Widget.Accordion.onloadDidFire = false;
    Spry.Widget.Accordion.loadQueue = [];
    Spry.Widget.Accordion.addLoadListener = function(handler)
        if (typeof window.addEventListener != 'undefined')
            window.addEventListener('load', handler, false);
        else if (typeof document.addEventListener != 'undefined')
            document.addEventListener('load', handler, false);
        else if (typeof window.attachEvent != 'undefined')
            window.attachEvent('onload', handler);
    Spry.Widget.Accordion.processLoadQueue = function(handler)
        Spry.Widget.Accordion.onloadDidFire = true;
        var q = Spry.Widget.Accordion.loadQueue;
        var qlen = q.length;
        for (var i = 0; i < qlen; i++)
            q[i].attachBehaviors();
    Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
    Spry.Widget.Accordion.prototype.getElement = function(ele)
        if (ele && typeof ele == "string")
            return document.getElementById(ele);
        return ele;
    Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
        if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
            return;
        ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
        if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
            return;
        ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
        if (!optionsObj)
            return;
        for (var optionName in optionsObj)
            if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                continue;
            obj[optionName] = optionsObj[optionName];
    Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(panel)
        if (panel)
            this.addClassName(this.getPanelTab(panel), this.hoverClass);
    Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
        if (panel)
            this.removeClassName(this.getPanelTab(panel), this.hoverClass);
    Spry.Widget.Accordion.prototype.openPanel = function(panel)
        var panelA = this.currentPanel;
        var panelB = panel;
        if (!panelB || panelA == panelB)   
            return;
        var contentA;
        if( panelA )
            contentA = this.getPanelContent(panelA);
        var contentB = this.getPanelContent(panelB);
        if (! contentB)
            return;
        if (this.useFixedPanelHeights && !this.fixedPanelHeight)
            this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
        if (this.enableAnimation)
            if (this.animator)
                this.animator.stop();
            this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration });
            this.animator.start();
        else
            if(contentA)
                contentA.style.height = "0px";
            contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
        if(panelA)
            this.removeClassName(panelA, this.openClass);
            this.addClassName(panelA, this.closedClass);
        this.removeClassName(panelB, this.closedClass);
        this.addClassName(panelB, this.openClass);
        this.currentPanel = panelB;
    Spry.Widget.Accordion.prototype.openNextPanel = function()
        var panels = this.getPanels();
        var curPanelIndex = this.getCurrentPanelIndex();
        if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
            this.openPanel(panels[curPanelIndex+1]);
    Spry.Widget.Accordion.prototype.openPreviousPanel = function()
        var panels = this.getPanels();
        var curPanelIndex = this.getCurrentPanelIndex();
        if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
            this.openPanel(panels[curPanelIndex-1]);
    Spry.Widget.Accordion.prototype.openFirstPanel = function()
        var panels = this.getPanels();
        if( panels )
            this.openPanel(panels[0]);
    Spry.Widget.Accordion.prototype.openLastPanel = function()
        var panels = this.getPanels();
        if( panels )
            this.openPanel(panels[panels.length-1]);
    Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
        // if (this.enableKeyboardNavigation)
        //     this.element.focus();
        if (panel != this.currentPanel)
            this.openPanel(panel);
        this.focus();
    Spry.Widget.Accordion.prototype.onFocus = function(e)
        // this.element.focus();
        this.hasFocus = true;
        this.addClassName(this.element, this.focusedClass);
    Spry.Widget.Accordion.prototype.onBlur = function(e)
        // this.element.blur();
        this.hasFocus = false;
        this.removeClassName(this.element, this.focusedClass);
    Spry.Widget.Accordion.KEY_UP = 38;
    Spry.Widget.Accordion.KEY_DOWN = 40;
    Spry.Widget.Accordion.prototype.onKeyDown = function(e)
        var key = e.keyCode;
        if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
            return true;
        var panels = this.getPanels();
        if (!panels || panels.length < 1)
            return false;
        var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
        var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
        while (nextPanel)
            if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
                break;
            nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
        if (nextPanel && currentPanel != nextPanel)
            this.openPanel(nextPanel);
        if (e.stopPropagation)
            e.stopPropagation();
        if (e.preventDefault)
            e.preventDefault();
        return false;
    Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
        if (!panel)
            return;
        var tab = this.getPanelTab(panel);
        if (tab)
            var self = this;
            Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
            Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
            Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(panel); }, false);
    Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
        try
            if (element.addEventListener)
                element.addEventListener(eventType, handler, capture);
            else if (element.attachEvent)
                element.attachEvent("on" + eventType, handler);
        catch (e) {}
    Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
        var content = this.getPanelContent(panel);
        if (isDefault)
            this.currentPanel = panel;
            this.removeClassName(panel, this.closedClass);
            this.addClassName(panel, this.openClass);
        else
            this.removeClassName(panel, this.openClass);
            this.addClassName(panel, this.closedClass);
            content.style.height = "0px";
        this.attachPanelHandlers(panel);
    Spry.Widget.Accordion.prototype.attachBehaviors = function()
        var panels = this.getPanels();
        for (var i = 0; i < panels.length; i++)
            this.initPanel(panels[i], i == this.defaultPanel);
        if (this.enableKeyboardNavigation)
            // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
            // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
            // by default.
            var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
            // if (!tabIndexAttr) this.element.tabindex = 0;
            if (tabIndexAttr)
                var self = this;
                Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
                Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
                Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
    Spry.Widget.Accordion.prototype.getPanels = function()
        return this.getElementChildren(this.element);
    Spry.Widget.Accordion.prototype.getCurrentPanel = function()
        return this.currentPanel;
    Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
        var panels = this.getPanels();
        for( var i = 0 ; i < panels.length; i++ )
            if( this.currentPanel == panels[i] )
                return i;
        return 0;
    Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
        if (!panel)
            return null;
        return this.getElementChildren(panel)[0];
    Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
        if (!panel)
            return null;
        return this.getElementChildren(panel)[1];
    Spry.Widget.Accordion.prototype.getElementChildren = function(element)
        var children = [];
        var child = element.firstChild;
        while (child)
            if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
                children.push(child);
            child = child.nextSibling;
        return children;
    Spry.Widget.Accordion.prototype.focus = function()
        if (this.element && this.element.focus)
            this.element.focus();
    Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
        this.timer = null;
        this.interval = 0;
        this.stepCount = 0;
        this.fps = 0;
        this.steps = 10;
        this.duration = 500;
        this.onComplete = null;
        this.panel = panel;
        this.panelToOpen = accordion.getElement(panel);
        this.panelData = [];
        Spry.Widget.Accordion.setOptions(this, opts, true);
        // If caller specified speed in terms of frames per second,
        // convert them into steps.
        if (this.fps > 0)
            this.interval = Math.floor(1000 / this.fps);
            this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
        else if (this.steps > 0)
            this.interval = this.duration / this.steps;
        // Set up the array of panels we want to animate.
        var panels = accordion.getPanels();
        for (var i = 0; i < panels.length; i++)
            var p = panels[i];
            var c = accordion.getPanelContent(p);
            if (c)
                var h = c.offsetHeight;
                if (h == undefined)
                    h = 0;
                if (p == panel || h > 0)
                    var obj = new Object;
                    obj.panel = p;
                    obj.content = c;
                    obj.fromHeight = h;
                    obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
                    obj.increment = (obj.toHeight - obj.fromHeight) / this.steps;
                    obj.overflow = c.style.overflow;
                    this.panelData.push(obj);
                    c.style.overflow = "hidden";
                    c.style.height = h + "px";
    Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
        var self = this;
        this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
    Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
        if (this.timer)
            clearTimeout(this.timer);
            // If we're killing the timer, restore the overflow
            // properties on the panels we were animating!
            if (this.stepCount < this.steps)
                for (i = 0; i < this.panelData.length; i++)
                    obj = this.panelData[i];
                    obj.content.style.overflow = obj.overflow;
        this.timer = null;
    Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
        ++this.stepCount;
        this.animate();
        if (this.stepCount < this.steps)
            this.start();
        else if (this.onComplete)
            this.onComplete();
    Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
        var i, obj;
        if (this.stepCount >= this.steps)
            for (i = 0; i < this.panelData.length; i++)
                obj = this.panelData[i];
                if (obj.panel != this.panel)
                    obj.content.style.height = "0px";
                obj.content.style.overflow = obj.overflow;
                obj.content.style.height = obj.toHeight + "px";
        else
            for (i = 0; i < this.panelData.length; i++)
                obj = this.panelData[i];
                obj.fromHeight += obj.increment;
                obj.content.style.height = obj.fromHeight + "px";

    On the bottom of yourpage you have this:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    Change it to this:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
    Ken Ford

  • Spry Accordion(or Template?) error

    I did some validation to one of several pages that occasionally have problems when I update the Master template page to my site(they look like this: http://njsustainingfarms.rutgers.edu/agclass1.html) , and the one error I got was for something in my spry accordion menu(which seems to be working fine):
              this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
    It's telling my contentA is null.
    Now, I know next to nothing about javascript, so I am pretty much stumped on how to resolve this.
    The one other thing I should note is that in design view, it shows that I have a duplicate head region(which is also editable except for the tags), but that is not so in the master template page.
    Any help would be much appreciated, as i've been battling with this issue for some time, and i'd like to try to figure it out once and for all.
    P.S.- I'd offer to attach the .dwt file, but I can't seem to find out how to do that on this forum.

    codeOutsideHTMLIsLocked="false" -->
    That says that anything outside of that area can't be modified, right?
    Nope. It says anything outside that area is editable, i.e., it's treated as an editable region.  This is the default behavior for a DW template and it allows you to place server scripting or javascript code above the <html> tag, or below the </html> tag in any child page. 
    Unless you are using server scripting, or are very advanced in your use of DW, you should never mess with this default setting.

  • Spry Accordion Issue

    Spry Accordion appears to snap shut to its default setting
    the moment you use it to navigate to a linked page.
    I want to keep the accordion open on the page that it
    represents rather than having the user open up the accordion each
    time they wish to navigate to the next page.
    Can this be done - if of course I have explained myself well
    enough which frankly i doubt!
    Thanks in advance
    Neil

    Al Sparber- PVII wrote:
    > "eclipsme" <[email protected]> wrote in message
    > news:fcjsoh$3m1$[email protected]..
    >> Al Sparber- PVII wrote:
    >>> "skipiouk" <[email protected]>
    wrote in message
    >>> news:fciqsg$t8i$[email protected]..
    >>>> Thanks Al
    >>>> is there no way to do this inside CS3 or is
    the purchase of piece of
    >>>> software necessary?
    >>>> Neil
    >>>
    >>> I don't know. We do not use Spry because it's
    just not compatible
    >>> with our approach towards markup, CSS, or
    scripting. If you are a
    >>> casual web developer and don't have a
    professional budget, perhaps
    >>> someone who is "into" Spry can help you hack a
    solution.
    >>>
    >>>
    >> See if this helps.
    >>
    >>
    http://labs.adobe.com/technologies/spry/articles/accordion_overview/
    >>
    >> Harvey
    >
    > Hi Harvey,
    >
    > I don't need "help" understanding how Spry widgets work.
    We have
    > analyzed the code and methodology and it's just an
    approach that we
    > would never take, hence we have no interest in it.
    Perhaps you meant
    > your post to be in response to someone else and not me
    >
    >
    Right, Al. Niel was asking the question. Your's wasn't the
    only post.
    Sorry if you got confused. The link provides information on
    configuring
    the widget. I thought this could be useful to Niel.
    Harvey

Maybe you are looking for