Horizontally spanning Accordion widget Needed.

Hi,
I wonder, is there any way that we can make a Accordion
widget spanning horizontally.
The way its pictured here..
Currently there are many widgets available with different CSS
files. But not even one widget I have seen with different behavior.
If you came across any of the widget with the above mentioned
functionality, kindly let me know.
Many Thanks
KP

Whenever the Spry team decides to ship a new version of the
accordion and you want that new functionality you have to merge it
yourself. I didn't make any other changes other than necessary for
the horizontal behaviour. With a compare your will find the
differences easily.
I've seen a wiget builder has been released at I will try to
make an installable widget of the horizontal accordion in teh near
future.

Similar Messages

Mobile Site - Need Accordion Widget to start at top of page upon item selection

I have set up a mobile site. I use the accordion widget for topics. If I select any topic without diving into it and scrolling, it works fine. If I scroll through a topic after selection, the next topic starts in the middle or the bottom. Kind of annoying for the user. Any ideas?
Thanks

Hi Kevin,
Could you please share the site URL or any screen shot for reference?
Regards,
Neha

Need to hide Accordion Widget Content until after pageload

Hi,
I was wondering if anyone had any experience in hiding the
content of the accordion widget panels until after the page loads.
I am fairly new to these libraries so I am fairly inexperienced on
how to go about a fix for this sort of issue. I have the widget
working fine, the only problem that I am having with the accordion
widget is that I do not like the way the accordion widget gets
loaded to the browser while the screen is loading, it looks clunky
and unprofessional.
Would anyone have any good ideas on how I go about correcting
this issue? Any help or suggestion is much appreciated.
Thanks
DB

Have you tried the examples shown at the "Hiding Data
References" page:
http://labs.adobe.com/technologies/spry/samples/data_region/HideDataReferencesSample.html
The .SpryHiddenRegion method seems to work for my
accordion.

DW Tutorial Question (Spry Accordion Widget) Beginner... :-(

Hi, I've just finished this tutorial (http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html) but have a problem with my Spry Accordion Widget, when I preview the site my footer moves when I select a different panels in the widget, I've read back and checked code/css but I still can't sus it out (Don't laugh if it's something obvious!) Please can anyone help me? I've copied code/CSS below.
A BIG THANKS IN ADVANCE!!
INDEX...
<!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>The Yacht Club</title>
<link href="main.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><img src="images/logo.jpg" width="290" height="144" />
    
</div>
<div id="sidebar1">
    <h3>Welcome</h3>
    <ul id="nav"><li><a href="javascript:;">Home</a></li><li><a href="javascript:;">About Us</a></li><li><a href="javascript:;">Membership</a></li><li><a href="javascript:;">Our Boats</a></li><li><a href="javascript:;">Current Races</a></li><li><a href="javascript:;">Contact Us</a></li>
    </ul>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Atlantic Ocean</div>
        <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
      </div>
<div class="AccordionPanel">
        <div class="AccordionPanelTab">Pacific Ocean</div>
        <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Indian Ocean</div>
        <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
      </div>
    </div>
    <p> </p>
</div>
<div id="mainContent">
    <h1> Luxury Yachts</h1>
    <p><img src="images/sailboat.jpg" alt="Sailboat" width="136" height="310" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    <h2>Sail to the Bahamas </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<br class="clearfloat" />
<div id="footer">
    <p>© 2009 Luxury Yachts – bring a cup for the bailout</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
MAIN CSS...
@charset "UTF-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FDFDFD;
background-image: url(images/body_BG.jpg);
background-repeat: repeat-x;
h1, h2, h3 {
font-weight: normal;
color: #00583F;
h1 {
font-size: 140%;
h2 {
font-size: 130%;
h3 {
font-size: 120%;
#container {
width: 780px;
margin: 0 auto;
text-align: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(images/container_bg.gif);
background-repeat: repeat-y;
#header {
background-color: #DDDDDD;
background-image: url(images/headerBG.jpg);
background-repeat: no-repeat;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px;
ul#nav {
background-image: url(images/buoy.jpg);
background-repeat: no-repeat;
background-position: left bottom;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 153px;
padding-left: 0px;
list-style-type: none;
#nav li a {
font-size: 90%;
color: #FFF;
text-decoration: none;
background-color: #09553F;
display: block;
padding: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #3574A7;
#nav li a:hover, #nav li a:active, #nav li a:focus {
color: #123464;
background-color: #B7DAD8;
#mainContent {
margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
#mainContent p, #sidebar1 p, #footer p {
font-size: 85%;
line-height: 1.4;
#footer {
background-color: #00593D;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 270px;
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
color: #FFF;
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
SPRY CSS...
@charset "UTF-8";
/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* 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 {
overflow: hidden;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #7C9297;
border-bottom-color: #7C9297;
border-left-color: #7C9297;
/* 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.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
background-color: #00583F;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
color: #FFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #7C9297;
border-bottom-color: #7C9297;
/* 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 {
overflow: auto;
margin: 0px;
height: 200px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
/* 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: #FFF;
color: #005b3E;
/* 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: #AAC7CE;
.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: #00583F;
color: #FFF;
/* 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: #FFF;
color: #00583F;
Apologies in advance if I'm asking a daft question!!

Hi,
using your source code, I couldn't find a really inserted "Spry Accordion". If I do that (translated from german DW) > Insert > Spry > Spry Accordion, I'll find in my DW source code something like that:
<div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Bezeichnung 1</div>
      <div class="AccordionPanelContent">Inhalt 1</div>
    </div>
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Bezeichnung 2</div>
      <div class="AccordionPanelContent">Inhalt 2</div>
    </div>
</div>
and in design view:
Please control your DW-entries.
Hans-G.

Problem with Accordion Widget INSIDE Sliding Panel Widget

Hello,
perhaps I should not do this, but I nested an Accordion
Widget inside a Sliding Panels Widget:
- There are eight Panels.
- Each one contains a complete Accordion.
The sliding works fine, and so does the Accordion animation,
but the text inside the Accordion Panel Tabs won't move along, when
a tab is activated. I need to hover the mouse over the accordion to
make the panel texts appear again.
Of course, when I un-nest the widgets and move the Accordion
widget out of the Sliding Panel widget, everything is fine.
My question is:
- am I demanding "too much" by nesting the widgets?
- or should this basically work, and the problem arises from
rivalling scripts?
Here is a link:
Nested
widgets Test
The horizontal top menu will activate the sliding panels, but
as of now only the leftmost menu item contains an Accordion (I know
the CSS does not look nice yet).
Is there anything I can optimise to get this to work?
Thank you so much,
Greetings, Jensen
Edit: The problem does NOT occur in Firefox, but in
Safari.

Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish

Problem with accordion widget flashing open and shut when page loads

why is it that my accordion widget flashes open and shut when the page is loading (see http://vincentballmusewebsite2013test.businesscatalyst.com/digital-illustration.html#.UVDr Ehx7JyII) have tried everything to solve this, and Adobes customer service is terrible they don't get back to you when they say they will.
Please help me someone,
Thanks

Thank you Zak for your help, I spent 5 hours going round in circles trying to fix that problem and that's all I needed to hear, a bit of honesty and integrity.and yes, Adobes terrible customer service has still not got back to after promising 2 level technical support to contact me last Monday, I wish there'd keep their promise
Pamela, did you try my test website or my own website and if so my own has now no accordion widget on it and my test website may need you to try loading a few times to see if it really works or not, sometimes it does actually work even on a pc but most times not.
thanks for you help too.

How do I add a new panel to the accordion widget in-between two others (NOT at the end)

In the accordion widget, the + button at the bottom adds a new panel to the end. I have a series of panels that are in alpha-sort and need to add a new panel in the middle... I can't figure out how to do it without re-doing the whole thing. is there a way to do this?

Gah! Thanks Mac.
That was the first thing I tried! I must not have had the right level selected. It's been driving me batty, but I've got it now.

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 as a menu navigation

I want a vertical menu navigation, with some pages having sub level pages.
The vertical menu widget only seems to position the sub level links to the right. But i want it all vertically stacked with the sub level links only showing when on that page.
e.g.
I have tried using the accordion widget as a menu navigation, by removing the show/hide content and adding the sub level link in the needed ones.
But when i set the links to the pages the active states don't seem to work when on the particular pages. Any ideas?
Any suggestions how best to achieve this?
Thanks
Nick

Hello,
When you say that the active state does not seem to work, if we take the example you have posted above, You want the Design should be expanded when you are on Exhibition Design page and "Exhibition Design" should show the active state. Correct?
In that case you would need to place the Accordion Widget not on Master page but on each page Separately.
And on the pages where you want the Top Manu Labels to be open (expanded), keep them open on that Particular page in Design view before Publishing/Exporting the site.
This way, you would be able to achieve the states for the submenus and expansion of Top Menu on the particular pages.
Regards,
Sachin

Accordion Widget on Tablet or Phone

Here is a problem or flaw. If you deploy an Accordion Widget on an phone or table MUSE site, and a user opens one of the Accordion tabs and scrolls to the BOTTOM of its contents. Then if the user opens the next Accordion tab, that one automatically opens at the BOTTOM of its OWN contents, which is very confusing to users. There needs to be a DEFAULT SETTING such as "Always open at the top of the contents."
Does anyone know of a workaround for this bug?

Hi, this is the BC forums, you probably want to post this in the Muse forum for the Muse team as this is releated to a feature of that not the BC platform itself.

Accordion Widget functionality

Hello. I need the accordion widget to activate on mouse over instead of mouse click. Is this possible? If not, is this a feature that will be added in the future?

Thanks for the response Kin!
I am setting up the links like you suggested, placing the
link inside the AccordionPanelTab, however, the problem isn't
getting the link to intercept the clicks, it's getting the link to
perform their default action. In the SpryAccordion.js file, on line
223, the default action of the tab's contents is being disabled.
This means that, regardless of whether or not there is a link
inside the tab, it will still act only as a tab (unless I'm missing
something). The code looks like this:
if (e.preventDefault) e.preventDefault();
If one adds:
e.preventDefault = false;
before the code on line 223, the problem is solved. The
problem with that solution is, if I go in and add that line of
code, I have to remember that change and where it was for all
future updates of the Spry widgets. So my question is, is there a
way to disable preventDefault so that default actions of, in this
case, links are enabled? Can this be done without editing the
Accordion Widget's Javascript file?

Accordion widget browser panel height

I am using the accordion widget browser and would like to shorten the height of the
panels - how can I do this...

I found the solution!
Sample of before: www.muohio.edu/lll/studyabroadweek/index2.html
Sampe of after: www.muohio.edu/lll/studyabroadweek.
The solution was at: http://docs.jquery.com/UI/Accordion#options but was a bit difficult for me to figure out how to implement it... after a bit of experiment - I got it!
In your .html document, at the beginning of the widget look for the code in black. Code in bold red is what was needed to solve the issue.
$(function(){
                // Accordion
                $("#jQueryUIAccordion").accordion({ header: "h3",
                                            animated: "slide",
                                            event: "click",
                                            collapsible : "false",
                                            autoHeight: false

Accordion Widget is limited to 5 buttons?

In the accordion widget properties you seem to be only able to add just one button, making a total of only 5 possible buttons. That seems very, very limited - is there a way to add more button, like 12?

Hello and welcome to the forum,
No, it is limited to 5, has to do with space needed for the dropdowns. And really, it is not a good idea to have too much content on one slide. Is it not possible to spread content over more than one slide? Or use one of the other interactions that allow you to have more 'buttons'?
Lilybiri

Accordion Widget not saving current scroll position

Accordion widget saves scroll position in Firefox, however in
IE7 the position gets reset to the center of Accordion Widget.
Example. Select Alabama and then select Wisconsin to see
effect.
See www.Qualite1.com/contactUs.html

Hi ghaug,
This is due to the tabindex attribute that is on the
top-level element of the accordion. Apparently when an element is
focused in IE, it tries to make sure the top of that element is in
view, so it is "conveniently" scrolling it into view for you.
To prevent this behavior for accordions like yours that don't
fit neatly into a single screen, you are going to have to remove
the tabindex attribute from the top-level accordion element. If you
still want/need keyboard navigation of your accordion, then you
have to switch to using links in your accordion tabs. You can find
an example here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#EnablingKey boardNavigationWithLinks
--== Kin ==--

Accordion widget and audio

Using CP 7, I am trying the accordion widget for the first time, and I have it working rather nicely. Then I added audio to each of the options, to accompany the text that is revealed when the option is chosen, so that as each option is selected, and its text appears, the specific audio would play. That makes sense and that is how I would expect it to work. However, as soon as the screen loads one audio plays, and none of the audio clips play when their option is chosen.
Is this really the way it works? I would expect no audio until the user clicks one of the options, and then that audio would play. The way it is working for me makes no sense. Why have an audio icon for each content area (under each accordion option) if they don't play when the user opens that option?
As I created content for each of the options, I added an audio clip, using the audio icon specific to each accordion option. But it appears that only one audio is being used for the entire accordion.
I read through the string about problems with audio and the accordion, but that issue was different from this.
The way this is working now is not acceptable, and I will need to throw away everything I have done so far and start over if I can't make this work.

I just tried it in Windows with exactly the same behavior.
Can someone confirm how this is supposed to work? Logically, when a user selects one of the accordion options, and the option expands to show the text within it, then the associated audio should play. In the image below, you see the audio icon associated with the content for one option. However, in the documentation I found it is very vague about what the audio is assicated with. If the audio is just associated with the entire object, then the interface below is misleading at best.

Horizontally spanning Accordion widget Needed.

Similar Messages

Maybe you are looking for