Nested Accordion Panels

I want to set up a set of nested Accordion panels but I don't know how. For instance I want to make a 3 tier Navigation structure that accordions. So I would have for example: Object 1>Sub 1> Sub Sub1, Object 1>Sub 1> Sub Sub2, Object 1>Sub 2, Object 2>Sub 1> Sub Sub1, Object 2>Sub 1> Sub Sub2, Object 2>Sub 2>Sub Sub 1, Object 2>Sub 2>Sub Sub 2. However, you seem to only be able to have a sliding panel with content under it and not be able to nest it with a panel inside a panel.
I would use the Spry Menu Bar because it has multiple tiers however I really like the sliding feature. I know I have seen this type of menue before but I cannot remember where. Any help would be greatly appreciated.
Also, can you have a diferent number of sub elements? You seem to only be able to pick one size all of your sub content. However, my content is not uniform in length.
Thanks

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
        <div id="Accordion2" 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>
    </div>
  </div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
  </div>
</div>
<script src="SpryAssets/SpryAccordion.js"></script>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false });
</script>
</body>
</html>
Gramps

Similar Messages

  • Dashed rule between menu items nested inside an accordion panel widget in Muse?

    I have a vertical menu widget nested inside an accordion panel widget and I want a dashed rule under each menu item. I already know I can have a solid rule by assigning a stroke to just the bottom of each menu item container. 
    I manually created dashed rules by "step and repeating" a 1px black square followed by 2px of space to a 380px width. I positioned these dashed rules under each menu item and grouped them with the menu. Then I placed the menu widget with the dashed rules into the content container for the accordion panel.  The menu expands and collapses in the Preview mode but the dashed rules don't show up.
    Muse CC 2014, iMac OS10.9

    The link again is I forgot to add http to the link before, but it should have worked.
    http://www.lipowiec.org/test/index.php
    a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
    b) used spry to add horizontal menu to header
    c) followed instructions from Spry Help
    http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
    working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
    To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
    Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
    Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
    Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
    Change the width property to a desired width (or change the property to auto to remove a fixed width).
    Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
    Add the following properties to the rule: float: none; and background-color: transparent;.
    Delete the width: 8.2em; property and value.
    Under IE it's broken, under the other browsers it works.
    There need to be more IE HACKS added.

  • Lightbox nested in Accordion panel is not working.

    I am attempting to nest a lightbox slideshow in an accordion panel with less than desired results. I can get the Lightbox to nest and I can arrange the buttons just fine .However, when I preview it my forward and back buttons appear in the upper left corner and they are all messed up. This is absolutly useless as it destroys the aesthetics. Any insights as to how to fix this (not work around, I can do that...) would be appreciated.
    Here are some screens:
    1) layout is fine. Note the advance arrows on left and right of layout.
    2) Layout seems to be fine in the preview. Thumbnails look good...
    3) The advance arrows are not where I placed them in the layout. They are overlapping in the upper left corner.

    Well, it's not recreating what I did becauseI don't see any images in your example. Did you populate the gallery?
    Anyhow:
    I created an accordion panel.
    The first top panel contains a price list with text only.
    Using the "+" I made a second panel and placed a "slideshow lightbox" widget
    I populated the widget with roughly 100 jpegs compressed to 50%  and edited my arrow keys placing them on the left and right which
    gave the results in the image above.
    This is repeatable on my end.

  • Nested Sliding Panel in an Accordion Panel

    I have a nested Sliding Panel inside an Accordion Panel.
    The Sliding panel will show until the Accordion panel is
    completely closed then it abruptly hides itself.
    It does this only in IE of course.
    Not sure if a sliding panel can be properly nested inside an
    Accordion panel so if anybody could please tell me I would really
    appreciate it.
    Thank you,
    Bisser.

    Hi kinblas,
    I changed the AccordionPanelContent5 to "hidden" and it still
    keeps the image displayed until the Accordion Panel closes, and
    then the nested sliding panel image disappears abruptly. This only
    happens in IE.
    Any other suggestions would be welcome.
    Thank you,
    Bisser.

  • Prevent lower text from moving when accordion panels open

    I tried out the Accordion Panel from Project Seven which is
    really nice and works well. My only issue right now is that I would
    like to prevent the rest of the text outside and below this widget
    within the same column from moving. When any panel opens it causes
    the contents of the entire column to shift down thus causing the
    page to shift down as well.
    I have tried using a new div for the content below the panels
    and also a new table below but can't seem to figure out how to keep
    the content from shifting. Curently I have a table cell nested and
    have tried with CSS to keep it from moving but that is not working
    either.
    Thanks in advance for any help with this.
    Here is the code for the column in question:

    no takers on this one? Does anyone know how I could fix this
    with divs? Is it possible to put this accordion into a separate div
    and create another below it that would not move? Like on the new
    apple site...They have some really awesome accordion style navs on
    the sides that do not throw the rest of the page off when they open
    or close.
    Thanks.

  • Nested Collapsible Panels

    Hi I have found a bug in using the collpasible panels, in a
    nested manner. No problem in IE 6, after I altered the class for
    the main CollapsiblePanel container, to have overflow:hidden( which
    prevents (in IE6 & IE7) the nested sub-panels, showing
    underneath/through a main panel, when collapsing (even after giving
    the main panel a background color).
    When interacting with sub-panels, after the initial loading
    of the page, the height of the master panels grow appropriately,
    based on sub-panel opening and closing, until, the sub-panel is
    collapsed and subsequently the main panel is also collapsed.
    IN IE 7, a main panel, housing a sub-panel, will not grow to
    the appropriate height , after a sub-panel has been collapsed and
    then the main-panel is collapsed. After re-opening the main panel
    and then clicking the sub-panel's tab, the subpanel's content gets
    cuts-off, until the main panel is closed and re-opened, at which
    point everything grows correctly.
    How do I get the interim height of the subpanel, to size the
    main panel correctly, without closing the main panel while the
    sub-panel is opened, and then reopening the main panel?

    For the first problem you'll have to use overflow: auto which
    will not cut the content that will not fit into the element but
    instead will show scrollbars. The default behavior in CSS say that
    an element shouldn't grow if has a fixed height if the content will
    be larger. Instead there are 3 options: the content is displayed on
    top over the element but the element shouldn't resize because will
    affect all the other elements in the flow (default browser
    behaviour, overflow: visible) or it should cut the content and
    display the part that enter in the viewport (overflow: hidden) or
    should show scrollbars to be able to scroll the viewport and see
    the full content (overflow: scroll).
    The only method to allow the element to enlarge to the same
    size as the content within is to not specify a height. In this
    situation the element will expand itself to its content height. In
    this situation you'll have to put the useFixedPanelHeights option
    of the Accordion widget to false (default is true) which will mean
    the Accordion is not controling the height anymore and will leave
    each panel with the height you set.
    Now, the second problem appears because when you open a panel
    we are animating the transition from the element current height to
    0px and the other way around by setting a gradual fixed height.
    Because of this the last height value used to animate will remain
    set to the element. When you change the content into a Panel, the
    Panel is no longer able to resize automatically for the reasons I
    explained above. Unfortunately there is no solution to this issue
    other then to disable the animation by passing "enableAnimation"
    option to false into the constructor.
    Regards,
    Cristian

  • Nested accordion spry

    Can someone please give me some direction as to how to do a nested accordion spry with different tabbed panel widths?  Thanks

    Never seen that done with an accordion. Why would you want different widths? Not sure what you mean by "nested" as well. I've placed accordions inside sidebars, inside Spry tabbed panels, and even in another accordion. You simply have to make a few CSS changes so it doesn't conflict with other Spry elements (change IDs).

  • Nested Accordion

    I would like to use the accordion to nest multiple levels of
    links, while using semantic HTML. This means not surrendering to
    DIV soup, but using multiple UL/LI combinations. The HTML I have
    worked out, but JavaScript isn't my strong point. How would I edit
    the JavaScript to make this work? HTML code sample below:
    <div id="mainNav" class="Accordion">
    <ul class="AccordionPanel">
    <li class="AccordionPanelTab">My Flagship</li>
    <li class="AccordionPanelContent">
    <ul>
    <li class="sectionLinksLevel2">My Home</li>
    <li>
    <ul>
    <li class="sectionLinksLevel3">My Loans</li>
    <li class="sectionLinksLevel3">My Tasks</li>
    <li class="sectionLinksLevel3">My Pool
    Tasks</li>
    <li class="sectionLinksLevel3">My Team
    Tasks</li>
    <li class="sectionLinksLevel3">My Alerts</li>
    </ul>
    </li>
    <li class="sectionLinksLevel2">Flagship
    Settings</li>
    <li class="hideMe">
    <ul>
    <li class="sectionLinksLevel3">Change
    Password</li>
    <li class="sectionLinksLevel3">User Profile</li>
    </ul>
    </li>
    <li class="sectionLinksLevel2">Underwriting
    ModelTraining / Resource</li>
    </ul>
    </li>
    </ul>
    </div>

    You basically just insert an entire Accordion structure
    inside one of the Accordion content panels of the outer accordion
    and make sure that you call the constructor for the inner one:
    <div id="outerAccordion" class="Accordion">
    <ul class="AccordionPanel">
    <li class="AccordionPanelTab">Outer Accordion Panel
    1</li>
    <li class="AccordionPanelContent">
    <p>Here's a nested Accordion!</p>
    <div id="innerAccordion" class="Accordion">
    <ul class="AccordionPanel">
    <li class="AccordionPanelTab">Inner Accordion Panel
    1</li>
    <li class="AccordionPanelContent">Inner Panel 2
    Content</li>
    </ul>
    <ul class="AccordionPanel">
    <li class="AccordionPanelTab">Inner Accordion Panel
    2</li>
    <li class="AccordionPanelContent">Inner Panel 2
    Content</li>
    </ul>
    </div>
    </li>
    </ul>
    </div>
    <script>
    var outer = new Spry.Widget.Accordion("outerAccordion");
    var inner = new Spry.Widget.Accordion("innerAccordion");
    </script>
    --== Kin ==--

  • 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

  • Can i get my money back for an app that i do t want

    i just bought my first new mac pro 1 week ago, but i didnt know that the new version of OS X lion was already in this computer, so basically i purchased it for nothing.

  • Iphone interface with Windows Live (Mail, Contact and Calendar)

    I use Windows Live Free Download Client for my mail, calendar and contacts. (Just did not want to pay Microsoft for Outlook). My iPhone does not interface with any of the above. I am not able to view my calendar or contacts on iphone. For contacts I

  • SRL on standby db

    Hi all, I have created a physical standby database following the steps mentioned in Metalink document id [ID 789370.1]. that worked well and logs are being applied when i switch logfile in primary. But in the document in step 11 it is asking for crea

  • What is the best way to move my itunes music library from my old computer to my new one?

    what is the best way to move my itunes music library from my old computer to my new one?

  • Repeating Lables on Report

    Hi -- I am having a problem with labels on my report. I am plotting two metrics, Revenue and Total Revenue both by corporate division. The problem is when i drill into the report it repeates the corporate division on the x-axis (it is listed twice, o