Close all in accordion widget?

Is there a way / I wish you would add  a Close ALL option to the accordion widget. Because the widget can push content down the page, if the accordion is left open and a user clicks on a nav bar that has an anchor placed when the accordion is closed, the anchor now is not in the correct position.
Kind of a  "lose focus, then close all" action.

Hi
Accordion has the inbuilt feature to Close all , so when user clicks on the open tabs they can close all.
For this you would need to enable close all in Accordion control interface.
If you are referring to add a button on page itself where if user clicks then all open tabs should close , then probably you would need some customization.
Because open tab in Accordion will only close on click on the tab itself.
Thanks,
Sanjit

Similar Messages

  • Is there a way to force a user to view all of Accordion Widget?

    Is there a way to force a user to read, or at least view,
    all sections of the Accordion Widget? We want to make sure the learner reads
    all of the material before advancing to the next slide. Is there a way to do
    this? I have searched all over, but I have been unable to find.

    No way. This is a static learning interaction, no event that could be used eventually. Personally I prefer offering reading material that is engaging over looking for a way to push the learner to look (reading doesn't mean he understands or grabs it) at all the stuff. But that is my teacher's past, if student doesn't read your stuff, something is wrong with the stuff, not with the student.
    If you have to force, you'll have to find another way than the accordion interaction .

  • Where is Accordion option for Close All Initially?

    I wanted to create a dynamic sliding menu for mobile by using Accordion. I want the menu accordion to be closed initially. I want to know where is the option of select "Close All Initially"? I have checked "Can Close All" but it doesn't make any different.
    Thanks,
    Siny

    Hi Siny,
    mac_heibu is correct. "can close all" gives you the option to be able to close all the accordion panels. But if you want it to be closed when someone opens your site, close the accordion in Muse design view of your site and then publish it.
    Regards,
    Aish

  • "Can close all" option not working for content panel within accordion widget

    Hi. I can close an accordion menu by clicking the header but it won't close by clicking on the content panel itself (even though I have can close all selected in the flyout.) I've seen tutorials where it works but I can't replicate. Seems like a bug.
    Thanks for any ideas on how to fix or a workaround.
    I'm on the CC 2014.3 release. Mac OS 10.10.2
    P

    Hello,
    if you using OAW (Outlook AnyWhere) check the authentication method
    get-OutlookAnywhere -Identity "<Servername>xpv00645\RPC (Default Web Site)" | fl *AuthenticationMethod*
    I think it is set of NTLM or Negotiate.
    Outlook 2007 has negotiate
    problems at an OAW connection
    authentication.
    Change the authentication to NTLM for
    the internal and Basic for the extenal method.
    You need to reconfigure the Outlook Exhange settings to anonymous authentication and in the proxy settings to default authentication

  • Accordion widget Bug: Accordion deactivates all hyperlinks below widget when opened

    A placed accordion widget in a master page with foreground order deactivates all hyperlinks under the accordion widget.

    This seems to happen when you enable the Can Close All / Overlap Items below options while the Accordion is placed on Master Foreground and the link is right below it on a content page (but within the Accordions span). The workaround would be to either move the Accordion to Master Background or move the link under the Accordion to be outside its span (when opened) or disable the Overlap Items below option.
    Thanks,
    Vinayak

  • Can I set my accordion widget to "expand all" tabs?

    I am using an accordion widget to display content on my web page. Is there a way to allow the user to "expand all" of the accordion tabs at once?

    One way you can achieve this is by creating single panel accordion files, just copy the file down for each section, make sure to set the accordion setting to "Can close all".
    See attached screen shot when published.... the panels are all closed, but you can open all to view.

  • 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 ==--

  • Panels Accordion - want to close all panels when navigate away

    Hi complete Newbie, so apologies if answered already or a no brainer. Using panel accordion and love the effect. However, have placed a link to another page within one of the sections. Works fine except when new page loaded, panel section is still in 'open' state. Is it possible to get accordion to collapse when mouse rolls out of panel or a link within it is clicked?
    Thanks in anticipation.
    Joe

    Hi Joe,
    I believe you have placed the accordion panel on the master page, on the master page please select options for the accordion panel and select can close all: http://prntscr.com/3ofqgx
    Once you have added the link to the section in accordion panel, please make sure all the sections are closed.
    Doing this will load the target page but as the master page has the accordion closed, it will be rendered on the page as closed.
    Regards,
    Gaurav Aggarwal

  • How can I use the tabbed panel with the accordion panel options of close all panels and over/not overlap the items below?

    Ideas for features in Adobe Muse

    I assume this is what you want to achieve in the footer....
    Make sure in Muse before you export that the panel is closed, and also as Brad suggested, make sure Overlap Items Below is unchecked. I would also check the "Can Close All" button.

  • All time Bug! Accordion widget does not retain content position as in design view

    I have noticed that content placed inside an accordion widget that is stretched to fill browser width do not retain the position of its elements. This is very annoying as ones layout does not look right and balanced across screen.

    That was it KathH --- THANKS!!!
    Had created the row w/out <td> cells to carry the top banner (sort of cheating) on spanning the cells i guess ( )
    Anyway, re-wrote so that the banner table was independant and did not require span and picked up the data table independantly.
    Problem solved and designer picked up the image precisely.
    Thanks again!!!
    Curious though that the image is dependant on the <td> tag.  I would have expected any image called within the page to display in the designer regardless of location in the html.
    Oh well, fixed and onto the next challenge.
    Once more THANKS!!!

  • One link to open/close all _accordion_ panels

    I am aware that collapsible panels have group feature and you can open and close all panels by wrapping the individual panels within a group.
    Is there a way to open all panels in an accordion widget?

    Open all, no.
    Close all, yes (set panel to -1, with the useFixedHeights:false option)

  • 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.

  • SPRY accordion widget IE8 ONLY issue

    hello everybody,
    i noticed a strange "jumpy" behavior while using the spry accordion widget -- this affects IE8 only (currently using 8.0.6001.18882 on vista), other browsers (including IE7 and IE8 forced into IE7 mode) work as expected. this issue seems to be related to the margin property of the accordion container...
    not shure whether this behavior is related to IE rendering or the spry javascript code itself... anyway i made NO changes to the spry script (my version is 0.15, 1.6.1, which i believe to be most recent one).
    the xhtml (strict) and css are perfectly valid (there might be some MINOR css hacks which are not related to the accordion itself). i do NOT use ANY padding on the inner container of the accordion (which would definetely make the spry js count the tween in odd way). the accordions (especially the main menu on the left) are little more complex, but they were built according to the spry widget document, found on the adobe spry website.
    so, here it is -- check the accordion on the left side (the bug seems to happen almost always while opening/closing the last BLUE "section" of the accordion, please play with the accordion for a while to reproduce it -- while the accordion closes, it "loses" it's bottom margin (i guess), what's even more wierd, everything gets back to place after you move a mouse):
    http://www.prazskematky.cz/home.php
    PLEASE NOTICE: since the website is still under development and i'm using a IE meta tag to force it into IE7 rendering, to reproduce this behavior please be shure to switch IE engine to IE8 standards mode
    well, we all now how IE handles css... so it's propably an IE bug -- anyway if you have encountered a similar issue of even better found a fix, please let know. (i don't consider a fix switching to another js library, i would like to use the spry, because of it's DW integration)
    many thanks,
    p.s.

    ross m. greenberg wrote:
    > Now however the entire .gif is not appearing in the
    accordion panel is expanded. I insert the graphic using a standard
    "menu insert/graphic/browse and select"
    >
    > the graphic file is not showing up properly on such an
    insert...
    Are you referring to what it looks like in Design view? If
    so, that's
    correct. Accordion panels have a fixed height. From memory, I
    think it's
    200px. However, if you test the page in a browser, you should
    see a
    scrollbar automatically generated on panels that have content
    that
    exceeds the height of the panel.
    If you want flexible-height panels in the accordion, you need
    to adjust
    both the CSS and the script that initializes the accordion. I
    have
    covered all the details in my "Essential Guide to Dreamweaver
    CS3" (and
    the forthcoming CS4 edition). You can probably find online
    tutorials as
    well. Try a Google search for Spry flexible height accordion.
    The accordion widget has been around since CS3, and it hasn't
    changed in
    CS4, so a Google search should bring up a lot of information.
    David Powers, Adobe Community Expert
    Author, "The Essential Guide to Dreamweaver CS3" (friends of
    ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

  • Accordion widget -  Toggling the Panel?

    I know this is probably simple but...
    1) How do I make the Accordion widget Panels "Open &
    Close" by clicking on the same Panel twice?
    What I mean is that my Accordion Panel works fine &
    "Opens" when clicked once, but will not "Close" when clicked again?
    (I want to be able to quickly open & close selected
    panels at ease)
    2) How do I apply a CSS to the Accordion without affecting
    the original CSS style?
    Earlier when went in to the Accodion.css file & started
    making changes, it messed up the Accordion itself & I could not
    get back to it's original look?
    Thanks for the help,
    jlig

    Cristian, Thanks for the update.
    In regards to using Accordions & Panels, it would really
    help to see a video tutorial on the workshop site that shows how to
    use ADDT Forms & Lists with SPRY widgets like the Collapsible
    Panel. Many of us are a bit unclear on how to target links between
    the two and general integration of the two.
    For example:
    - What is the sequence?
    1. Create a Blank DW page
    2. Add the SPRY Panel
    3. then ADDT records/Forms?
    Or
    1. Create a Blank DW page
    2. Add the ADDT records/Forms
    3. Add the SPRY panels, etc?
    Also, From an RIA point of view it seems like the purpose of
    AJAX is to get rid of all the "screen/page changes". Can you help
    us understand for example, the process of converting regular
    dynamic forms (via ADDT or otherwise) that have many pages, to AJAX
    enabled links that point to Panels, Tabs & Accordions instead?
    Thanks for all your expertise,
    jlig

  • Accordion widget -  Toggling the Panels Up & Down?

    What do I change in the Accordion widget to make the panels
    Open & Close?
    I want the Panel to Open by clicking on Panel A, and then
    have Panel A close if Panel A again. (Basically a Toggle
    effect)

    Cristian, Thanks for the update.
    In regards to using Accordions & Panels, it would really
    help to see a video tutorial on the workshop site that shows how to
    use ADDT Forms & Lists with SPRY widgets like the Collapsible
    Panel. Many of us are a bit unclear on how to target links between
    the two and general integration of the two.
    For example:
    - What is the sequence?
    1. Create a Blank DW page
    2. Add the SPRY Panel
    3. then ADDT records/Forms?
    Or
    1. Create a Blank DW page
    2. Add the ADDT records/Forms
    3. Add the SPRY panels, etc?
    Also, From an RIA point of view it seems like the purpose of
    AJAX is to get rid of all the "screen/page changes". Can you help
    us understand for example, the process of converting regular
    dynamic forms (via ADDT or otherwise) that have many pages, to AJAX
    enabled links that point to Panels, Tabs & Accordions instead?
    Thanks for all your expertise,
    jlig

Maybe you are looking for