Accordion Widget Starting Closed

I am trying to use the accordion widget on the following
page:
http://jalc.org/jazzED/s_eac.html
I am having a problem getting the page to load with the
widget panels closed except the first one. I have added the
following code to just below the DIV close tag and it didn't appear
to help:
var acc1 = new Spry.Widget.Accordion("Accordion1", {
useFixedPanelHeights: false });
</script>
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Accordion1", {
defaultPanel: 0 });
</script>
Any ideas would be GREATLY appreciated.
Thanks,
Andy

andrewmcgibbon wrote:
> I have added the following code to just below the DIV
> close tag and it didn't appear to help:
>
> var acc1 = new Spry.Widget.Accordion("Accordion1", {
useFixedPanelHeights:
> false });
> </script>
> <script type="text/javascript">
> var acc1 = new Spry.Widget.Accordion("Accordion1", {
defaultPanel: 0 });
> </script>
Your second JavaScript statement overwrites the first one.
The options
should be passed to the Accordion constructor in the same
statement like
this:
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Accordion1", {
defaultPanel: 0,
useFixedPanelHeights: false });
</script>
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Similar Messages

  • Spry Accordion Widget Init Closed, Without Snap?

    (This is a topic discussed in
    another
    thread, but I didn't want to hijack the thread with my own
    question, so I started a new one...)
    I want to start my Accordion widget in a closed state. I
    figured out the trick of setting the default panel to '-1' and
    turning fixed heights by altering the code in the footer of the
    page to:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",
    {defaultPanel: -1,
    useFixedPanelHeights: false});
    When you do this, however, the page loads with the first
    accordion panel open and visible for a split second until the page
    is loaded, at which point the widget snaps the panel shut. This is
    very ugly and undesirable, especially given that this accordion is
    on a page element common to every page on the site.
    I've tried setting an initial class that is hidden, however
    the Spry Accordion widget is written in such a way that it
    preserves whatever classes you have rather than replacing them.
    Does anyone know a way to load the page with the accordion
    panels shut without this initial flash of the first panel snapping
    shut?
    Thanks,
    Steve

    Hey Al,
    Nice plug for your own application! Here is another one,
    since I am one of your happy customers.
    I used the Spry widgets in the new DW CS3 and spent a couple
    of days trying to tweak things to get them to work the way I
    wanted. After getting input from my brother (his site that I am
    working on) he really wanted some more style than what I was coming
    up with using the basic DW widget. I smacked my dollar on the
    barrel head and tried out PVII Accordion instead.
    I can't tell you how fast and easy it was to insert and
    customize this plugin. Not to mention they had some nice little
    themed styles, one of which (the cobalt blue) was a real close
    match to the color scheme I originally was using! (PS - any chance
    of getting more theme styles down the road for this plugin or
    matching styles for the other ones???)
    Changing the open or closed state of the panels - it was so
    simple!!! I simply went into the modify option and chose the number
    that corresponded to my different panels in the menu list. My buddy
    used an expression about DW CS3 that fits nicely with using tools
    like PVII Accordion Magic. You can use a screwdriver with some
    precision and a lot of hand strength to build what you want but it
    will take you alot of time...or you can plugin a power drill and be
    done with it!
    To see it in action on my current work in progress go to:
    http://www.dvdflashbacks.com/williamsburghealth/index.php
    As for sstringer's original question - how to do this in DW's
    Spry widget...
    I think you are onto the right track with the -1 setting. If
    I am not mistaken though, Spry uses 0 for the first panel, so I
    think you would need to use an option like {defaultTab: 1} to open
    the 2nd panel and so on.
    PS - Just so everyone knows - I am not a sales person for
    PVII - just a very satisfied customer!

  • Open an accordion widget in the closed state?

    I have searched the forums but have yet to find a resolution
    for this issue. I am using an accordion widget and would like for
    all of my panels to appear closed when the page initially loads.
    Only once the user has clicked the tab do I want the panels to
    open. Any suggestions that do not require me to buy a separate plug
    in? Thanks.

    This is directly from the Adobe documentation:
    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed
    However, one thing to keep in mind is that this is assuming
    that you are using the 1.6.1 update (as that is what the references
    refer to). If you have never updated your Spry this would be a good
    opportunity to do so. The below is the to the official Spry
    homepage. There you will find the update package which includes
    some samples and an Extension. Install the extension and restart
    DW. Then under the Sites menu you will see a new option to update
    Spry. Run that script and your Spry will be updated. Also on that
    homepage is a link to the official Spry forums:
    http://labs.adobe.com/technologies/spry/home.html

  • 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

  • Reliability of Spry Accordion Widget

    I posed a question in this forum last week and was unable to
    get a helpful answer to my problem. I am trying to use the Spry
    Accordion Widget on a site:
    http://www.jalc.org/JazzED/s_eac_B.html
    I have researched here to learn how to get the panels to
    start closed with one panel to be open by default. This works
    exactly like expected in Firefox and Chrome but NOT in IE.
    Am I wrong in my assumptions that:
    1) Folks from Adobe monitor this board and chime in with
    answers/solutions or acknowledgement of bugs; and
    2) Spry widgets are a reliable cross-platform technology that
    have had the bugs worked out
    or, is the real case
    1) Adobe folks only look into these forums on an occassional
    basis, if at all; and
    2) Spry widgets should be left alone if you are expecting
    them to perform properly relative to cross-platform capabilities.
    I appreciate anyone's feedback or suggestions on these
    questions.
    Thanks,
    Andy

    I just re-read my post above and am mortified at the tone of
    my message. It was in no way intended to come off as pissy, which I
    fear it might have. Anyone with any thoughts on my issue, I would
    appreciate your feedback.
    Regards,
    Andy

  • 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

  • Spry Accordion widget

    Have a Dreamweaver question about the Spry Accordion widget.
    I am designing a website for a real estate company. I will have different pages set up as a state page with a sub-level of cities within the page. I am using the accordion widget for the cities. As you know, you click on the panel tab and the next panel drops up or down closing/opening the previous panel.
    What I would like to do is add an action anchor (view all properties) outside the spry widget to open all the panels at once if a client wanted to see the entire list. However, I would still want the functionality of the panels to be collapsible. Is this possible? Is there a bit of code restructuring I would have to do to the JavaScript?

    Try
    <!DOCTYPE html>
    <html>
    <head>
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
    <style>
    .openit .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    </style>
    </head>
    <body>
    <a href="#" class="openAll">open all</a> - <a href="#" class="closeAll">close all</a>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
    </div>
    <script src="SpryAssets/SpryAccordion.js"></script>
    <script src="SpryAssets/SpryDomUtils.js"></script>
    <script>
    function MyOpenAllEventHandler() {
        Spry.$$("#Accordion1").addClassName("openit");
    function MyCloseAllEventHandler() {
        Spry.$$("#Accordion1").removeClassName("openit");
    Spry.$$(".openAll").addEventListener("click" , MyOpenAllEventHandler, false);
    Spry.$$(".closeAll").addEventListener("click" , MyCloseAllEventHandler, false);
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>
    The "!important" on these rules is necessary because the Accordion  widget places inline styles on the actual AccordionPanelContent elements  when opening and closing them. Since inline styles have a higher CSS  specificity then CSS class rules, "!important" is necessary to "trump"  the inline styles.
    Gramps

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

  • Why is my text in one of my text blocks in my accordion widget going vertical?

    I need a break!  Now, in my accordion widget one of the text blocks are vertical.  Or what I should say is the text looks correct but the T tool is showing that it is vertical and the menu at the top of my screen shows it's vertical.  I was trying to get rid of extra space after my wording and noticed that the vertical tool shows.  I have tried everything to get it to go back to normal text.  As soon as I click back into the text frame it reverts back to vertical.  I have wasted so much time with problems with widgets today I'm ready to give up.  Anyone know the answer?

    I was so frustrated I decided to try to delete the text box for that accordion section and start over.  It seemed to be ok now.  Now I'm having problems with anchors.  It's always something when I am working with deadlines.  Could you look at my site?  I still have a lot to do but the business catalyst site is opitsourcebook01.businesscatalyst.com.  If you go to the accordion widget on the left under "Associations and Organizations and click "Click this link" at the beginning of the paragraph it will take you to the page.  Again, very frustrated but in the menu bar with "Physicians - Pharmacists - Nurses - General" I removed all but one anchor because they would not line up.  If you click on "General" it doesn't go to where the anchor is farther down the page just right above "General Listings".  I have spent all day reviewing tutorials and I can't seem to see what I have done wrong.  Going for a run to rethink.  Thanks for your help.

  • Dreamweaver Accordion Widget default panel

    I'm relatively new to javascript.
    I'm using the Spry Accordion widget that comes with dreamweaver.
    I want to use it as a menu, so I have tables inside it with links.
    I have all the tabs closed for the index page
    I am looking for the clicked tab to remain open.
    How does one go about doing this?
    Thanks in advance for your help.

    Check out these samples
    http://go.spry-it.com/cookie

  • Spry Accordion widget Question

    Have a Dreamweaver question about the Spry Accordion widget.
    I am designing a website for a real estate company. I will have  different pages set up as a state page with a sub-level of cities within  the page. I am using the accordion widget for the cities. As you know,  you click on the panel tab and the next panel drops up or down  closing/opening the previous panel.
    What I would like to do is add an action anchor (view all properties)  outside the spry widget to open all the panels at once if a client  wanted to see the entire list. However, I would still want the  functionality of the panels to be collapsible. Is this possible? Is  there a bit of code I would have to add to the JavaScript?
    Is there a genius out there that can hook me up with some knowledge?

    I actually did away with the accordian widget and went a different route. It was too glitchy. Thanks for your input though. I will take note of the suggestions you provided and maybe try it out one day.

  • Dropdown Menu with Accordion widget

    Hallo,
    Ich habe folgendes Problem. Ich habe mit dem Accordion Widget ein Dropdown Menü erstellt. Ich möchte gerne, dass sich dieses Menü nicht wieder schließt wenn ich z.B auf Start klicke. Der Start Menüreiter hat 3 unter themen und diese sollen immer sichtbar bleiben.

    Hi
    Can you please share the site url where you have placed the widget ?
    You can also pm me the site url.
    Thanks,
    Sanjit

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

  • 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

Maybe you are looking for