4 Replies Latest reply on Sep 14, 2008 7:29 AM by waltoncreative

    Spry accordion default panel

    waltoncreative Level 1
      I have pasted this text after the existing script at the end of my document:

      <script type="text/javascript">
      var acc8 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 2 });

      Which ought to open panel 3 when the page loads but is doesn't open ANY panels! If I change the defaultPanel: to read 0 it correctly opens the top panel.

      Do I have to number the panels somehow? I am using a Mac and neither Firefox nor Safari seem to work.

      Here is the site where the script should work:

      Clicking on any of the links in the accordian takes you to the correct page, but each time the accordian displays closed!
        • 1. Re: Spry accordion default panel
          Ben M Adobe Community Professional
          2 things jump out at me.

          First, the CSS document for the Accordion panel does not appear to be attached and I don't see the CSS attributes in your other CSS document.

          The second thing is that your Spry is out of date and I don't remember what version had that Javascript added to change the default open tab. So you will need to go to the Spry Homepage, and download the Spry Updater Package. Inside that package you will find a ton of samples and an Extension. Install the Extension and restart DW and then under the sites menu you will see a new option to update your Spry. Run that and then re-upload the SpryAssets folder.

          • 2. Re: Spry accordion default panel
            waltoncreative Level 1
            Hi thanks for this help.

            I have done as you suggest and taken out the @import url("SpryAssets/SpryAccordion.css"); from my CSS file and updated the spry assets to 1.6.1....

            Now at least the tab highlights for the page that I have navigated to, but this time the accordion doesn't open.

            Is there perhaps another script that actually OPENS the accordion for the page I have navigated to?

            Here again is the home page of the updated new site I am working on:

            • 3. Re: Spry accordion default panel
              Ben M Adobe Community Professional
              I probably should have mentioned this, but when you updated the Spry it changed your code in all of your Spry documents. So there is now no default panel set. So you would need to add that code back in. As far as changing which panel is open depending on the page, as far as I have understood Spry, you would need to use server-side scripting such as PHP or ASP to pass a variable to another page and then use Javascript to read that variable and thus pass it along to the script since Javascript cannot carry GET/POST vars from page to page since Javascript is client-side.

              In regards to something that works automatically I know Project Seven's versions tend to work a little better than the Spry code and usually require less changes to the code but these are not free extensions. Al usually stops around these forums every so often and might be able to shed some more light on this for you or you could check out there site and post in their newsgroup:


              • 4. Re: Spry accordion default panel
                waltoncreative Level 1
                Hi again,

                I am not sure which code you mean needs to be added back in? I have this at the beginning in the <head>

                <link href="../copenhagenCandleCompany.css" rel="stylesheet" type="text/css" />
                <link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
                <script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>

                And this at the end before the closing </body> tag:

                <script type="text/javascript">
                var Accordion1 = new Spry.Widget.Accordion("Accordion1");
                var acc8 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 1 });

                What other code do you mean I need to put back in?

                Also I might have made what action I want to do sound more complicated than it really is...

                All I want to do is set up a series of pages with the accordion ALREADY open so it appears that the menu has stayed the same but just the content of the page that has changed.

                So my problem is STILL that I need to have predetermined panels open by default. It seems using this code only seems to 'select' the panel tab rather than open it which I am SURE is what its meant to do...

                <script type="text/javascript">
                var acc8 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 1 });

                Finally - maybe I have miss-understood the whole use of the accordion altogether - is it perhaps NOT meant to be used to navigate from one page to another? perhaps just click on to show / hide layers on the SAME page?

                I am getting so fed up with the blasted thing!