Accordion Panel - Variable?

I would like to create an accordian that has the Panel based
on the content. I will not know what the Panel label is until I
have created the content for that panel (via PHP/MySQL).
Can this be done??

Basically, this is what I am doing (this is my first attempt
at PHP/MySQL - so if youhave a better idea, let me know!)
I have a DB that contains anywhere from 12 to 35 athletic
events with each event having up to 5 records that represent the
'Top-5' achievements for each event at that moment in time.
Since the 'Event' may or may not be present, I need to dynamically
create a panel for each event with the panel label stating the
event (Like '110 m Hurdles' or 'Javelin') with each Event having up
to 5 results.
========================
Panel: 110 m Hurdles
Content item 1
Content item 2
Content item 3
Content item 4
Content item 5
Panel: Javelin
Content item 1
Content item 2
Content item 3
Content item 4 (note there are only 4)
Panel: XXX
Content item 1
Content item 2
Content item 3
Content item 4
Content item 5
Panel: ZZZ
Content item 1
Content item 2
Content item 3 (note there are only 3)
================================
I have a PHP code to create the table result and I place it
into the Content for the respective panel.
1) I need to dynamically create Panels (not worked out yet)
2) I need to be able to label each Panel (this question)
I hope this helps! And thanks!
Basically I want to mimic the following:
http://www.swimdata.info/Metro/MetroMT8.nsf/All?OpenView&CollapseView

Similar Messages

  • Start with all Accordion panels closed with variable height panels

    I inserted a Spry Accordion on this page: http://www.brucebarrdesign.com/video_new.htm
    I want the panels to open to a size depending upon the content within them so I set the height to auto. The problem is that when you go to the page, the first panel is open. I want all of the panels to be closed when you first go to the page. Per the Help docs and some posts I've seen in the forum, I tried inserting this code:
    <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
    </script>
    However, this only works with fixed height panels. If I use it with the variable height, it opens all of them, so I commented it out for now. How can I get this to work?
    Thanks

    GPDMTR25 wrote:
    I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
    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 options, and a -1 for the "defaultPanel" option:
    <script type="test/javascript">
    var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
    </script>
    Angela
    Hi Angela,
    You are right, the only way it will work is by setting the fixed height to false. As for the for the default panel option, -1 is not a panel and if you had 3 panels we could have used the number 3 (panel1 = 0) or 99 or whatever as long as there is no panel with that number. If we had used the number 1 for instance, then the 2nd panel would be opened by default.
    Hope this helps.
    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

  • Can someone explain the code for having the Accordion panels closed?

    I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
    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 options, and a -1 for the "defaultPanel" option:
    <script type="test/javascript">
    var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
    </script>
    Angela

    GPDMTR25 wrote:
    I located the answer to my own question (how to get all the accordion panels to remain closed when the browser opens) but I still don't understand the answer. Can someone explain this?
    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 options, and a -1 for the "defaultPanel" option:
    <script type="test/javascript">
    var acc1 = new Spry.Widget.Accordion ("Acc1", { useFixPanelHeights: false, defaultPanel: -1});
    </script>
    Angela
    Hi Angela,
    You are right, the only way it will work is by setting the fixed height to false. As for the for the default panel option, -1 is not a panel and if you had 3 panels we could have used the number 3 (panel1 = 0) or 99 or whatever as long as there is no panel with that number. If we had used the number 1 for instance, then the 2nd panel would be opened by default.
    Hope this helps.
    Ben

  • How do I Hide open accordion panels, tooltips, etc. in Design view in Muse

    I am adding tooltips and accordion panels in Muse.  The problem is that, when I am editting the site in Design view, I cannot get the tooltips and panels to close... and so any other objects, text, etc is hidden by the open tooltip / accordion panel... I worked around this somewhat by creating another element in the accordion panel that contains no text, and so shrinks the whole accordion when that element is active, but this is cumberson, and I can find no comparable work-around for tooltips...

    AppleScripts can be saved as run-only, which will keep a casual user from seeing the code, but there isn't a way to keep plain text from being seen.  You should never place sensitive information in plain text in your script/application, or even use them with global variables, since those are also saved with the script.
    The security shell utility can be used to get a password from the system keychain, for example:
    getKeychainPass("Apple") -- example
    on getKeychainPass(itemName)
      return text 2 thru -2 of (do shell script "security 2>&1 >/dev/null find-generic-password -gl " & quoted form of itemName & " | awk '{print $2}'")
    end getKeychainPass

  • Accordion with variable height

    Hi -
    I have a 2-panel accordion with variable heights, and spry
    data in both the top and bottom panels. Selections made in the top
    panel will load data into the bottom panel, and the page opens to
    the top panel by default. My problem is that the bottom panel will
    only display enough height to show the initial HTML markup, and not
    the spry data generated after the initial page load. Is there any
    way to use an observer to "refresh" the accordion to reset its
    height to accommodate the new data?
    Also, is there a way to require that at least one panel
    remain open when using variable heights?
    Thanks in advance,
    Rod

    Hi,
    We have a similar question on this
    post.
    To fit exactly with your request you should change the line:
    regionHeight =
    document.getElementById("myRegion").scrollHeight;
    with:
    document.getElementById("myRegion").style.height =
    document.getElementById("myRegion").scrollHeight + 'px';
    Diana

  • Accordion Panel Height

    At the beginning of the SpryAccordion.js there is code
    commented-out that hints at the ability to dynamically define
    accordionPanel heights (rather than the default "200"). I am not a
    master javascripter and I've been banging my head against this all
    day long. The animation of the accordion destroys the rendered
    height information.
    I was wondering if anyone had a quick-fix for this.
    Thanks.

    Thanks for the response. I understand that this isn't a
    production release...I was just hoping there was an easy workaround
    that I wasn't skilled enough to see yet.
    My problem isn't setting the accordion panel to another
    value. What I was hoping to do is have the accordion behave the
    same way it does with animation set to false: each panel is as big
    as the content. Right now, with animation turned on, every panel in
    the accordion is the same height (200, 400, whatever you set it at)
    regardless of how much content is in there. The animator sets the
    height of elements to 200 or to zero, which destroys the original
    height information. I understand why it needs to do this.
    I was trying to have the panel animator store the height in a
    variable, run the animation that kills the height, set the display
    for the hidden panel to "hidden" (the way it achieves things in the
    non-animated version), and then reapply the original height.
    Unfortunately, I am not handy enough with javascript to make this
    happen.
    I don't expect a solution (I know you have many other,
    important things on your hands)...but if there is an answer, it
    would be greatly appreciated.

  • Accordion panel "blank" in IE6; shows on accordion tab hover

    this is a weird one. I'm using Spry1.5 accordion with 3
    panels. The accordion panels themselves each contain a form and
    some tables and whatnot. the markup appears to be valid.
    Everything works fine in firefox. but in IE 6, i get this
    behavior: the panels open properly and all that, but the div itself
    is "blank", meaning none of the content shows up. However, when I
    hover over any of the panel tabs, the content appears.
    I'm at a loss. Has anyone else ever experienced anything like
    this and, if so, how do you work around it?
    It's hard for me to post code because this is in an internal
    site, and also there's all kind of other js and css being brought
    into the page. i'm trying to extract all of it so that i can put it
    online somewhere, but it's taking me some time.
    thanks so much.
    Marc Esher

    It seems that this behavior can be caused by multiple
    factors. Several of the solutions suggested by others didn't help
    me. In my case, I discovered that the problem could be solved by
    turning off panel animation. In order to keep the animation in
    non-MS browsers, I trap for IE and append the proper code if
    necessary,in PHP:
    (This code also uses the $accOpen variable (set elsewhere) to
    specify which panel to open when the page loads. Obviously, you can
    remove this if you don't need it.)
    quote:
    // Trap for Internet Explorer, because animation screws up
    the display
    $ua = $_SERVER['HTTP_USER_AGENT'];
    $ie = "";
    if(preg_match("/MSIE/", strtoupper($ua)))
    $ie = ", enableAnimation: false";
    ?>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",
    {defaultPanel: <?= $accOpen ?><?= $ie ?>});
    //-->
    </script>
    I hope this helps.
    Regards,
    Bill Krauss

  • Accordion Panel Widget - open and close speed.

    Hello,
    Is there any way to change the speed that an Accordion Panel Widget opens and closes?
    I would like it to be slower than it is now.
    For my project it would be more relaxed and graceful.
    Thanks,
    Chris.

    HI Chris
    With Accordion we cannot setup the speed as of now , but you can try out composition widget where we can define transition, auto play speed.
    Thanks,
    Sanjit

  • Globally open and close all accordion panels

    Is there a way to globally open and close all accordion
    panels? For example, it would be nice to have an "Expand all" and
    "Collapse all" link at the top of the page, before the accordion,
    that has this functionality.

    Hi FM_n_DC,
    Accordions can only ever have a single panel open. If you
    want individual control over which panels are open you probably
    want to use a CollapsiblePanelGroup. This sample shows how to open
    all and close all of the panels of the CollapsiblePanelGroup:
    http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
    --== Kin ==--

  • Using text links to open accordion panel

    How do I use text links (from the page's main menu) to
    programatically open a particular panel.
    here is the page:
    http://debrankin.com/tee/SITEDESIGN/
    for example: I want to click on "Resumes and Cover Letters"
    in the left hand menu to open the first accordion panel (by the
    same name). I have this set this page so that all panels are closed
    initially.
    i know i'm missing something because this obviously does not
    work: i've looked for documentation and this issue is inadequately
    addressed!

    twinflame wrote:
    > i know i'm missing something because this obviously does
    not work: i've looked
    > for documentation and this issue is inadequately
    addressed!
    Not really. The problem is that you have attempted to create
    a
    JavaScript object called accordion1 before the accordion HTML
    is even
    loaded into the browser. Moreover, the script that
    initializes the
    accordion is already in your HTML where it should be (after
    the
    accordion), but it uses Accordion1, not accordion1
    (JavaScript is
    case-sensitive.
    Remove this after your menu.
    > <script type="text/javascript">
    > var accordion1 = new
    Spry.Widget.Accordion("Accordion1");
    > </script>
    Change the links in the menu to Accordion1.openPanel(0),
    etc., and it
    should work.
    David Powers
    Adobe Community Expert, Dreamweaver
    http://foundationphp.com

  • Anchor links to accordion panels not working properly across browsers

    Hi everyone,
    I need some help to figure out why my anchor links  to specific accordion panels on another page are not working properly  across browsers.
    I have a Map page which has tooltips on  mouseover on the site markers. 15 of the tooltips have "Click here for  information" anchor links (although only 14 are currently linked) which,  in theory, would take you to the Nurseries page where the specified  accordion panel would be opened with the nursery entry appearing at the  top of the new browser window.
    Here are the links to the Map page and Nurseries page, respectively:
    www.alegriadesignstudio.com/RFRI/map_v6.html
    www.alegriadesignstudio.com/RFRI/nurseries_v6.html
    I've  tested the anchor links on IE, Firefox, Google Chrome, and Safari, and  have received varying results. In most cases, the anchor links worked  perfectly on two of the browsers, while on the other browsers, the  correct accordion panel is opened but the nursery entry does not appear  at the top of the new browser window. Anchor links using Safari and  Google Chrome fared better (10 out of 14 links worked properly, and  8/14, respectively), whereas when using Firefox and IE, only 3 anchor  links worked properly. The target audience for this website will be  using IE and Firefox, so I  would appreciate any help to figure out how to tweak the code so that  the most, if not all, anchor links work properly on these two browsers  in particular.
    Here's an anchor link which worked perfectly in  IE, GC, and Safari, but in FF, the entry did not appear at the top of  the new browser window.
    www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem
    http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem [To access the anchor link on the Map page, mouseover the third green  dot from the top of the map (Tooltip--Location: Mangatarem) and then  click on "Click here for information."]
    Here's a sample anchor link in which the entry did not appear at the  top of the new browser window in any of the 4 browsers:
    www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel
    http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel [To access the anchor link on the Map page, go to "Mindanao" at the  bottom of the map and mouseover the fourth green  dot below the word "Mindanao" (Tooltip--LOCATION:        Brgys. Amabel, Bongolanon, Imamaling, & Manobisa; Magpet;        North Cotabato) and then  click on "Click here for information."]
    Here's a sample anchor  link in which the anchor link worked properly in GC and Safari, but the  entry didn't appear at the top of the browser window in IE and FF:
    www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar
    http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar [To access the anchor link on the Map page, go to the small island  north and a bit west of "Mindanao" which is called "Bohol" and mouseover  the fourth green  dot below the word "Mindanao" (Tooltip--LOCATION: Bilar; Bohol) and then   click on the first "Click here for information."]
    Many thanks in  advance for your assistance!
    Joy

    Hi everyone,
    I'm still trying to figure out how to resolve the problem of anchor links to accordion panels not working properly across browsers (see original post for details). I would greatly appreciate any suggestions on how to resolve the problem.
    Many thanks in advance.
    Joy

  • Slideshow Image Order of Go AND Problem with Sizing an Accordion Panel

    SLIDESHOW Is there a way to set the start, middle, and end in a slideshow? I have tried arranging the position of the triggers (nothing happened); and moving the targets in the layers panel (again, nothing happened). I would like the slideshow to begin and end with specific slides.
    ACCORDION PANEL Will not allow me to size it smaller than 962 pixels. The content area of the accordion panel is filled with one slide show per panel or tab, and I've checked all of the elements within the slideshow to make sure nothing exceeds 960 pixels. Nothing I can find exceeds 960 pixels, but when I remove all the elements from the content area, BOOM, I can make the panel any width I want.

    Slide show sorting:
    No, Mylenium, you are definitly wrong, You can choose any image order you want within slideshows:
    1. Make thumbnail temporarily visible and drag the thumnail to the position you want.
    or
    2. Identify the slides in layers panel and drag their panel entries to the position you want.
    Accordion panel:
    You can choose whatever size you want – even with a slideshow within:
    You have to make sure, that all element of the slideshow (caption, prev, next, counter) fit within the accordion panel. And – since the single accordeon panels don’t allow individual sizes – you have to make sure, that the content of every(!) accordeon panel does not exceed the size you want.

  • How do I collapse all the accordion panels

    The problem that I still have is that I am trying to close all the Accordions when clicking on the last panel.
    I have looked at the  Accordion.closePanel() , but that throws an error
    http://labs.adobe.com/technologies/spry/articles/data_api/apis/accordi on.html
    here is a link to the page http://www.antworks.co.uk/mobymemory/menu.html
    see the code below. Any help would be greatly appreciated. Thanks
    <!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="AccordionPanelTop" onclick="Accordion1.openPanel(0); return false;">memory cards (make)</div>
    <div class="AccordionPanelContent">
    <img src="images/new/trans.gif" width="7" height="7" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="12" /><br />micro SD / Transflash<br />
    <img src="images/new/trans.gif" width="7" height="3" />
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(1); return false;">memory cards (brand)</div>
    <div class="AccordionPanelContent2">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(2); return false;">mobile accessories</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(3); return false;">gaming</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab" onclick="Accordion1.openPanel(4); return false;">computing</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelBot" onclick="Accordion1.openPanel(5); return false;">customer login</div>
    <div class="AccordionPanelContent">Content 2</div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    //var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"Accordion"});
    //var Accordion1 = new Spry.Widget.Accordion("Accordion1", {closedClass:"AccordionPanel"});
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
    //-->
    </script>
    </body>
    </html>
    css
    @charset "UTF-8";
    /* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
    /* 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 {
    width: 174px;
    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.
    .AccordionPanelTab {
    background-color: #CCCCCC;
    letter-spacing: -0.04em;
    background-image: url(../images/new/spry/meun_blue.gif);
    background-repeat: no-repeat;
    padding: 8px 0 0 12px;
    height: 21px;
    font-family: Arial, Helvetica, sans-serif;
    color:#666666;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelTop {
    background-color: #CCCCCC;
    letter-spacing: -0.04em;
    background-image: url(../images/new/spry/meun_top.gif);
    background-repeat: no-repeat;
    padding: 8px 0 0 12px;
    height: 22px;
    font-family: Arial, Helvetica, sans-serif;
    color:#666666;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    .AccordionPanelBot {
    background-color: #CCCCCC;
    letter-spacing: -0.04em;
    background-image: url(../images/new/spry/meun_bot.gif);
    background-repeat: no-repeat;
    padding: 8px 0 0 12px;
    height: 21px;
    font-family: Arial, Helvetica, sans-serif;
    color:#666666;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    /* 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 {
    letter-spacing: -0.05em;
    background-image: url(../images/new/spry/meun_grey.gif);
    background-repeat: repeat-y;
    padding: 0 0 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    color:#7f879e;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    margin: 0px;
    .AccordionPanelContent2 {
    letter-spacing: -0.05em;
    background-image: url(../images/new/spry/meun_grey.gif);
    background-repeat: repeat-y;
    padding: 0 0 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    color:#7f879e;
    font-size: 14px;
    font-weight: bold;
    overflow: auto;
    margin: 0px;
    height: 200px;
    /* 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: #EEEEEE;
    /* 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: #555555;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #555555;
    /* 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: #3399FF;
    /* 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: #33CCFF;

    Just so that you know for the next time, when you give us a URL, there is no need to post your code. This is by far the most preferred method for obtaining our assistance.
    Having said that, place the fillowing in the HEAD section of your document, ensuring that you do have the file in that location
    <script src="SpryAssets/SpryDOMUtils.js"></script>
    Then, near the bottom of the page within the same SCRIPT content as your constructor(s), place the following code
    Spry.$$(".AccordionPanelBot").addEventListener("click", function(){
             Accordion1.closePanel();
    The Spry Element Selector (Spry.$$) requires SpryDOMUtils.js. Here we place an event listener to your last tab with a class name of AccordionPanelBot, which when clicked will close the currently open panel(s).
    I hope this helps.

  • Accordion Panels not collapsing in Adobe AIR

    Hi,
    I'm trying to create an AIR application with HTML/CSS/AJAX (spry).
    I've got my xml dataset set up and my accordion panel widget set up.
    When I preview in Safari everything works fine, but when I preview in Adobe AIR the xml data shows up and the panels, but the accordion panels aren't working, clicking on the AccordionPanelTab doesn't do anything.
    Any ideas on how to fix this, (if it is even possible)??

    Here is the code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <link href="_Assets/css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="_Assets/frameworks/AIRAliases.js"></script>
    <script src="_Assets/spry/xpath.js" type="text/javascript"></script>
    <script src="_Assets/spry/SpryData.js" type="text/javascript"></script>
    <script src="_Assets/spry/SpryNestedXMLDataSet.js" type="text/javascript"></script>
    <script src="_Assets/spry/SpryAccordion.js" type="text/javascript"></script>
    <script type="text/javascript">
    var dsSeasons = new Spry.Data.XMLDataSet("http://www.tvrage.com/feeds/episode_list.php?sid=21704", "Show/Episodelist/Season", {sortOnLoad:"@no", sortOrderOnLoad:"descending"});
    var dsEpisodes = new Spry.Data.NestedXMLDataSet(dsSeasons, "episode", {sortOnLoad:"seasonnum", sortOrderOnLoad:"descending"});
    dsSeasons.setColumnType("@no", "number");
    function airdate(region, lookupFunc) {
    var realdate = lookupFunc("dsEpisodes::airdate");
    var array = realdate.split('-');
    return array[2] + " - " + array[1] + " - " + array[0];
    function seasonnr(region, lookupFunc) {
    var nr = parseInt(lookupFunc("dsSeasons::@no"));
    if (nr < 10) { return "0" + nr; }
    else { return nr; }
    </script>
    <link href="_Assets/spry/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="main">
        <h1>TV Show Title</h1>
        <div id="showInfo" spry:region="dsSeasons dsEpisodes" class="SpryHiddenRegion">
            <h2>Episode List</h2>
                <div id="eplist" class="Accordion">
                    <div spry:repeat="dsSeasons" class="AccordionPanel">
                        <h3 class="AccordionPanelTab">Season {@no}</h3>
                        <div class="AccordionPanelContent">
                            <table spry:repeatchildren="dsEpisodes">
                                <tr class="{dsEpisodes::ds_EvenOddRow}">
                                    <td><input name="seen" type="checkbox" value="1" /></td>
                                    <td>{function::seasonnr}<span class="ex">x</span>{dsEpisodes::seasonnum}</td>
                                    <td>{function::airdate}</td>
                                    <td><a href="{dsEpisodes::link}" target="_blank">{dsEpisodes::title}</a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    var acc = new Spry.Widget.Accordion("eplist", { useFixedPanelHeights: false });
                </script>
            </div>
        </div>
    </div>
    </body>
    </html>
    Sorry, I don't have an online url for you, I'm still working locally.
    In the browser everything works fine, only when I preview in Adobe AIR the panels stop working.
    I hope you can figure it out and point me in the right direction.
    Thanks

Maybe you are looking for

  • Itunes stops working trying to sync iphone 4

    itunes stops working when I try and sync my ipone 4.  message says itunes has stopped working and program will close.  Unlike other threads I dont even get to a position where I get to 'unclick' photos and videos.  I tried uninstalling and re install

  • INTERNAL ORDER PERIODIC CONTROL

    Hi, In Internal order there is no periodic control. But in budget (KO22) is there any periodic control? Or Is there any way to use the blocked option -"select time frame", under menu-goto-period in Budget(KO22)? Regards Prakash

  • Attributes in WA reports 11.1.2

    Hi, I have an Essbase ASO cube with attribute dimensions. If i create a new report in WA, i can see the aiitribute dimensions in the data layout screen and add them to my oages, rows or columns. If I've created a report and not used the attribute dim

  • {color:green}Query in Forms!!!!{color}

    Hi all,         Can anyone please tell me how to create Interactive Adobe forms. Please provide me some documentation which explains step by step procedure to create and activate Interactive Adobe Forms. The requirement is that , I need to have a tex

  • Install Schema-BIP

    Dear All, How to install schema manually in Schedular Configuration tables. BIP-->Admin-->System Maintenance-->Scheduler Configuration When i click install schema it automatically run the DDL script in particular schema. But my requirment is i need t