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

Similar Messages

  • 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 default panel

    I want to set pages of a website so certain panels are
    already open as the default tab when a visitor selects the page.
    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 });
    </script>
    Which ought to open panel 3 when the page loads but is
    doesn't open ANY panels! all it does is indicate the tab as
    'selected' If I change the defaultPanel: to read 0 it correctly
    opens the top panel, but refuses to work for any other panels.
    Here is the site where the script should work:
    http://www.copenhagencandles.co.uk/new/
    Clicking on any of the links in the accordian takes you to
    the correct page, but each time the accordian displays
    closed!

    This is the URL
    /est_help.htm?tab=2&acc3=2
    and this is the markup
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
    <script src="SpryAssets/SpryTabbedPanels.js"></script>
    <script src="SpryAssets/SpryAccordion.js"></script>
    <script src="SpryAssets/SpryURLUtils.js"></script>
    <script> var params = Spry.Utils.getLocationParamsAsObject(); </script>
    </head>
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
        <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
            <div id="Accordion1" class="Accordion" tabindex="0">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">Label 1.1</div>
                <div class="AccordionPanelContent">Content 1.1</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">Label 1.2</div>
                <div class="AccordionPanelContent">Content 1.2</div>
              </div>
            </div>
        </div>
        <div class="TabbedPanelsContent">
            <div id="Accordion2" class="Accordion" tabindex="0">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">Label 2.1</div>
                <div class="AccordionPanelContent">Content 2.1</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">Label 2.2</div>
                <div class="AccordionPanelContent">Content 2.2</div>
              </div>
            </div>
        </div>
        <div class="TabbedPanelsContent">
            <div id="Accordion3" class="Accordion" tabindex="0">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">Label 3.1</div>
                <div class="AccordionPanelContent">Content 3.1</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">Label 3.2</div>
                <div class="AccordionPanelContent">Content 3.2</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">Label 3.3</div>
                <div class="AccordionPanelContent">Content 3.3</div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.acc1 ? params.acc1: 0});
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", {defaultPanel: params.acc2 ? params.acc2: 0});
    var Accordion3 = new Spry.Widget.Accordion("Accordion3", {defaultPanel: params.acc3 ? params.acc3: 0});
    </script>
    </body>
    </html>

  • Accordion Default Panel Based on Date

    I created an accordion panel with a Spry dataset consisting of elements relating to an event schedule. By default, I have all content panels closed, but I would like to set the default content panel based on an event's date.
    So, if the first event is on September 7, I would like the content panel open for the September 7 event (through the end of that day). On September 8th, I would like the next event's content panel open through that date and so on.
    It looks like I'll need to set a javascript date conditional, then loop through the dataset with "addObserver" and have it set the default panel through scripting in the widget javascript.
    Anyone have specific insight on how to accomplish this?
    Much Thanks,
    Colin
    Here's my basic code:
                                    <div style="width:622px" id="Acc1" class="Accordion" tabindex="0">
                                        <div spry:repeat="ds1" class="AccordionPanel">
                                        <div class="AccordionPanelTab" >
                                            <div class="rowsched" spry:even="schedeven" spry:odd="schedodd" spry:hover="schedhover">
                                            <ul style="display:inline;padding-left:4px">
                                                <li class="rositem" style="left:13px"><span spry:content="{Date}"></span></li>
                                                <li class="rositem" style="left:155px"><span spry:content="{Opponent}"></span></div> </li>
                                                <li class="rositem" style="left:310px"><span spry:content="{Location}"></span></li>
                                                <li class="rositem" style="left:455px"><span spry:content="{TV}"></span></li>
                                                <li class="rositem" style="left:555px"><span spry:content="{Time}{result}"></span></li>
                                              </ul>
                                        </div>
                                        </div>
                                        <div class="AccordionPanelContent">
                                            <div style="color:#000000"><img src="{icon}" alt="{Opponent}" width="100" height="67" /> Other content goes here</div>
                                      </div>
                                      </div>
    <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
    </script>

    You should be able to retrieve the value of other valueset using :$FLEX$.<valuesetname> I'm not sure about the exact syntax, it's been a while since i worked with applications.

  • Spry Accordion letztes Panel speichern

    Hi,
    ich habe auf der Seite www.hittfeld-sharks.de das Spry Accordion verwendet.
    Wenn man sich dort allerdings links durch die Mannschaften klickt ist es ziemlich nervig, dass sich immer wieder das defaultPanel öffnet. Kann man das umstellen, dass sich "beim ersten Öffnen" das default Panel öffnet, aber dann immer das, welches als letztes offen war ?
    Greets

    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 Different Panel Heights

    I'm building a Spry Accordion Widget as a left nav menu with
    25 different panels. Some of my panels contain 10 different links
    and others contain only 1 single link. Therefore I would like to
    adjust the height of each panel individually according to the
    number of links they contain, so I don't end up with huge white
    spaces in panels that contain fewer links. My initial idea, in
    addition to the .AccordionPanelContent class was to add an "id" to
    each panel and control each panels height through CSS. But for some
    reason I haven't been successful that way. It looks like all panels
    tend to take the height of the first panel, regardless of their
    individual set heights. I wonder if I can resolve my problem
    uniquely with CSS, or I do I have to go and change something in the
    SpryAccordion.js file.
    Thanks.

    Hi Donald, I inserted <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", {
    useFixedPanelHeights: false });
    </script> into my code. It's almost there, but not
    quite. I can see that it is trying to re-ajust the panels' height,
    but for panels that have a larger content it tends to show the
    whole panel's content and then hides the half of it. Also for
    panels with fewer content it doesn't seem to have an effect at all.
    I don't know if I have to fix something in the CSS or place the
    Acc1 ID in a different location within my accordion HTML code.
    Thank you.
    Here's the URL I'm working on if you want to take a look.
    http://64.49.218.100/product_p/00-120-0ll.htm

  • Spry Accordion Closing Panels

    Guys
    New to Spry Accordion. At the moment I've managed to
    configure the .js file to make the panels automatically closed on
    start-up. They open fine when clicked, but a second click on the
    headers won't then close the panel - it only closes on selection of
    the next panel.
    Can anyone (in simple terms!!) advise where I'm going wrong?
    Thanks in advance.
    Steve

    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
    This feature is only supported when using variable height
    panels, so you must pass a false into the Accordion's constructor
    for the
    "useFixedPanelHeights" constructor option, and a -1 for the
    "defaultPanel" option:
    <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    </script>
    Ken Ford
    Adobe Community Expert - Dreamweaver
    Fordwebs, LLC
    http://www.fordwebs.com
    "Centaurus18" <[email protected]> wrote in
    message news:fvktgv$77t$[email protected]..
    > Guys
    >
    > New to Spry Accordion. At the moment I've managed to
    configure the .js file
    > to make the panels automatically closed on start-up.
    They open fine when
    > clicked, but a second click on the headers won't then
    close the panel - it only
    > closes on selection of the next panel.
    >
    > Can anyone (in simple terms!!) advise where I'm going
    wrong?
    >
    > Thanks in advance.
    >
    > Steve
    >

  • Accordion Default Panel

    Is there a way to set all Spry Accordion panels closed? I
    have set the js variable defaultPanel to null and no panels open
    but I loose animation. My goal is to nest accordion panels and have
    only the selected panel open when I click on it. Is this
    possible?

    Is there a way to set all Spry Accordion panels closed? I
    have set the js variable defaultPanel to null and no panels open
    but I loose animation. My goal is to nest accordion panels and have
    only the selected panel open when I click on it. Is this
    possible?

  • Spry Accordion- all panels closed by default

    1) Can I have an accordion so that none of the panels are open by default?
    2) Changing the height of the panels: Can it be set determined by the amount of content inb a panel?  I have 5 panels, and each is populated with data from a database. some may need much more room than others.
    Thx,

    You can add it immediately after the Accordion if you want to - but then you end up with scripts scattered throughout your page(s).
    Most of the time I see it added to the bottom of the page.  I also do this as I've had several SPRY Elements doing stuff at one time and you can simply combine them into a single list.
    Add adri_grace's Code in a Script Tag to the same page that the Accordion is located on.
    At the very bottom - just before the Closing for the BODY and HTML Tags.
    So you end up with something like:
    <script>
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",.....
    .....{ useFixedPanelHeights: false, defaultPanel: -1 });
    var Accordion2 = new Spry.Widget.Accordion("Accordion2",.....
    .....{ useFixedPanelHeights: true, defaultPanel: 3 });
    var Accordion3 = new Spry.Widget.Accordion("Accordion3",.....
    .....{useFixedPanelHeights:false, enableAnimation:false});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",.....
    .....{defaultTab:7});
    </script>
    </body>
    </html>
    Go here:
    http://labs.adobe.com/technologies/spry/samples/
    Click on the Widgets Tab.
    *the dots for each example above are for continuity in the word-wrap - don't include in code.

  • Accordion - default panel not working

    Hi, I'm using this script so the second panel is open by default, but it's not working (all the panels appear close by default)
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: 1 });
    //-->
    </script>
    I can't figure out what's wrong.
    Here's the live page: http://www.apokrisis.com/client-projects/npfmc2010/public-meetings/committees-related-meet ings.html
    Thanks for your help!
    MWhitt

    Your code is this
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new
    Spry.Widget.TabbedPanels("TabbedPanels1");
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    var Accordion3 = new Spry.Widget.Accordion("Accordion3", {
    useFixedPanelHeights: false, defaultPanel: -1 }, {
    useFixedPanelHeights: false, defaultPanel: -1 });
    var Accordion4 = new Spry.Widget.Accordion("Accordion4");
    var Accordion5 = new Spry.Widget.Accordion("Accordion5", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    //-->
    </script>
    but should be this
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new
    Spry.Widget.TabbedPanels("TabbedPanels1");
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    var Accordion2 = new Spry.Widget.Accordion("Accordion2", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    var Accordion3 = new Spry.Widget.Accordion("Accordion3", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    var Accordion4 = new Spry.Widget.Accordion("Accordion4", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    var Accordion5 = new Spry.Widget.Accordion("Accordion5", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    //-->
    </script>
    Accordion3 and Accordion4 lines mixed up
    Carl

  • Set Accordion Default Panel in URL

    I am making a function call like this
    window.open('events.php?Accordion1.defaultPanel=3',
    '_parent')
    My goal is for the the user to click a button, go to the
    events page (events.php) and automatically open a specific panel in
    the accordion widget.. I cannot make the above code work.

    Hi Marlene,
    First read the following tutorial to understand what you
    should do to
    achieve what you want.
    http://foundationphp.com/tutorials/spry_url_utils.php
    If you haven't upgraded your spry version, the link to
    download the zip
    file
    http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_spry
    it's not working at the moment. If you want it I can email to
    you, just
    give me an email address or email to V1 Fusion to info [at]
    3rd-Eden
    [dot] com. He offered to send the file in another thread.
    Just let us know it!
    Cheers
    Marlene escribió:
    > I am making a function call like this
    > window.open('events.php?Accordion1.defaultPanel=3',
    '_parent')
    >
    > My goal is for the the user to click a button, go to the
    events page
    > (events.php) and automatically open a specific panel in
    the accordion widget..
    > I cannot make the above code work.
    >

  • Spry accordion open panel

    Hello,
    is there a way, that if I have a page without the accordion, and I click on that page a link, that link goes to the accordion panel page, and when it goes, specifically opens one of the pannels.
    THank you

    Yes.  But you need the SpryURLUtils.js files.  And you won't find them on Adobe Labs anymore because Adobe abandoned Spry last year.  The files have been moved to GitHub.
    Tutorial:
    http://foundationphp.com/tutorials/spry_url_utils.php
    Spry Files:
    Adobe GitHub account
    Nancy O.

  • How to make Spry Accordion Content Panel with a variable content fit

    I have a problem.  The content panel has a fixed length so I changed it to auto so I can view all the content of each panel.  The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels.  So as you click from one to the other, some are practically empty with all the space, while others seem full. 
    The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size.  This is the way I have the CSS for that.  How can I achieve the variable heights?
    .AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 5px 4px 6px 15px;
    height: auto;
    background: url(../images/backgrcolor0033.png);
    color: #FFF;
    Thank you.

    <!DOCTYPE HTML>
    <html>
    <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", { useFixedPanelHeights: false });</script>
    </body>
    </html>
    Gramps

  • Spry accordion defaulting colors in IE

    Hi all:
    I have built a Spry accordian with color styles in the css
    file which work fine in Safari but are defaulting to bright blue
    and aqua in IE7. Can anyone tell me the css or js mods I should
    make to fix the IE issue?
    K.

    Well, deleting the two rules for focus in the css file seemed
    to do the trick...

  • Spry Accordion Navigation Panel Behavior in Dreamweaver eLearning Template

    I am trying to create an eLearning course using the "SoftSkills" eLearning Template provided by Dreamweaver. I have created several extra div tags to set up extra titles on the tabbed accordion, however, regardless of how I set the variable "AccOpenPanel" here:
    <!-- TemplateParam name="accOpenPanel" type="number" value="0" -->
    all of the panels are displaying as open. I would like to have panel 2 open and all others closer. I'm sure there's a simple fix for this, but I can't find it. Actually I can't find any help for using this template, which I'm sure exists. Any suggestions?  Below is a sample of my accordion code:
              <div id="sidebar">
          <h1>Table of Contents</h1>
          <div class="contentArea">
            <div id="Accordion1" class="Accordion" tabindex="0">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">Welcome</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <!-- Add the .current class to the <a> tag for the current page -->
                    <li><a href="../index.html">Introduction</a></li>
                    <li><a href="../organization.html">Organization</a></li>
                  </ul>
                </div>
              </div>
            <div id="Accordion2" class="Accordion" tabindex="1">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">4</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <li><a href="../s1_001.html" class="current">Process Presentation</a></li>
                    <li><a href="../s1_002.html">Scenario 1</a></li>
                    <li><a href="../s1_003.html">Additional Information</a></li>
                    <li><a href="../s1_004.html">Scenario 2</a></li>
                    <li><a href="../s1_005.html">Self-check</a></li>
                  </ul>
                </div>
              </div>
              </div>
            <div id="Accordion3" class="Accordion" tabindex="2">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">2</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <li><a href="../s2_001.html">Introduction</a></li>
                    <li><a href="../s2_002.html">Real Life Video</a></li>
                    <li><a href="../s2_003.html">Key Points</a></li>
                    <li><a href="../s2_004.html">Interactive Presentation</a></li>
                    <li><a href="../s2_005.html">Self-check</a></li>
                  </ul>
                </div>
              </div>
              </div>
            <div id="Accordion4" class="Accordion" tabindex="3">
                        <div class="AccordionPanel">
                <div class="AccordionPanelTab">3</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <li><a href="../s3_001.html">Introduction</a></li>
                    <li><a href="../s3_002.html">Real Life Video</a></li>
                    <li><a href="../s3_003.html">Key Points</a></li>
                    <li><a href="../s3_004.html">Interactive Presentation</a></li>
                    <li><a href="../s3_005.html">Self-check</a></li>
                  </ul>
                </div>
              </div>
        </div>
        <div id="Accordion5" class="Accordion" tabindex="4">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">4</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <li><a href="../s4_001.html">Introduction</a></li>
                    <li><a href="../s4_002.html">Real Life Video</a></li>
                    <li><a href="../s4_003.html">Key Points</a></li>
                    <li><a href="../s4_004.html">Interactive Presentation</a></li>
                    <li><a href="../s4_005.html">Self-check</a></li>
                  </ul>
                </div>
              </div>
        </div>

    The code that you have shown is not the problem, despite my wondering why you have created a new accordion for each panel. Also you have not shown the links to the support files (JS and CSS) nor have you shown the constructor for each of the accordions, but I assume that you have attended to these matters and did not think it worthwhile to show the code.
    Personally, I would have created one accordion with four panels, but this is a matter of choice.
    Gramps

Maybe you are looking for

  • Converting RGB PDF to CMYK PDF

    I'm looking for a way to convert RGB PDF's to CMYK PDF for printing purposes. The RGB PDF is created by an online Flash application and I'm hoping to convert the file using Acrobat via Command line. I have tried a couple of programs e.g. PStill and P

  • External table with Date Format

    I have external table and in the file date format is YYYY-MM-DD. i want to insert date format mask in the create table command . the bleow command is getting created . But it is giving error when i use select command. CREATE TABLE XADV.XADV_test_EXT_

  • It always says ERROR NEW ITUNES LIBRARY..

    It always says this.. ERROR! NEW ITUNES LIBRARY

  • R3load cannot export more than 100 mount points for Oracle?

    We have a DB with more than 390 sapdata###  mount points  (HPUX-PARISC). They are truly mount points, NOT directories under some other mount points. After export using R3load (i.e NO DB-specific ), the keydb.xml generated for import has only from sap

  • Error parsing value for 'filter' Declaration dropped

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarVertical iframe position: absolute; z-index: 1010; filter:alpha(opacity:0.1); font-family: Arial, Helvetica, sans-serif; font-si