Spry Accordion- all panels closed by default

1) Can I have an accordion so that none of the panels are open by default?
2) Changing the height of the panels: Can it be set determined by the amount of content inb a panel?  I have 5 panels, and each is populated with data from a database. some may need much more room than others.
Thx,

You can add it immediately after the Accordion if you want to - but then you end up with scripts scattered throughout your page(s).
Most of the time I see it added to the bottom of the page.  I also do this as I've had several SPRY Elements doing stuff at one time and you can simply combine them into a single list.
Add adri_grace's Code in a Script Tag to the same page that the Accordion is located on.
At the very bottom - just before the Closing for the BODY and HTML Tags.
So you end up with something like:
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1",.....
.....{ useFixedPanelHeights: false, defaultPanel: -1 });
var Accordion2 = new Spry.Widget.Accordion("Accordion2",.....
.....{ useFixedPanelHeights: true, defaultPanel: 3 });
var Accordion3 = new Spry.Widget.Accordion("Accordion3",.....
.....{useFixedPanelHeights:false, enableAnimation:false});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",.....
.....{defaultTab:7});
</script>
</body>
</html>
Go here:
http://labs.adobe.com/technologies/spry/samples/
Click on the Widgets Tab.
*the dots for each example above are for continuity in the word-wrap - don't include in code.

Similar Messages

  • Accordion all panels closed and SpryURLUtils

    http://www.adelantedesign.co.uk/websites/adelante/Packaging/Packaging_Samples01.asp?panel= 0#Accordion1
    The above does not open panel 0, change it to panel=1 or
    panel=2 etc opens fine.
    I am using this to keep all panel closed:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",
    {useFixedPanelHeights: false, defaultPanel:(params.panel ?
    params.panel : -1)});
    I've read a few posts but not seen a solution. Any ideas.
    Rich

    Can I use this same method to jump to another pages'
    Collapsible panel, versus accordian panels, or tabbed panels ( i
    asssume I can use the following, added on the first collapsible
    panel contructor on the target page (or do I have to add it to all
    my contructors including creating a default params for the html
    panels, also existing on the same page as the collapsible panels):
    var cp1 = new
    Spry.Widget.CollapsiblePanel("cp1",{contentIsOpen:false,
    CollapsiblePanel: params.Panel !=undefined ? params.Panel : -1});?
    I want to jump to other pages' Collapsible panels' and then load
    specifc HTML fragments in the SpryHTMLpanel, existing inside the
    targeted collapsible panel. The link is coming from another pages,
    SpryHTMLPanel, from inside a collapsible Panel. I have added the
    appropriate <script> src and initalized the var params in the
    head on the target page.

  • Accordion Spry default all panels closed

    How do I setup the Accordion Spry to have all panels closed
    when my page initially loads? I don't want any of the panels to be
    set as the default opened panel and for the browser to select the
    panel they want open first.

    I have installed Spry 1.6.1.
    Here is my code:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1",{
    defaultpanel: -1 });
    Still opens the first panel upon loading my page with the
    Accordion spry. There must be something else to be
    configured?

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

  • Spry Accordion Different Panel Heights

    I'm building a Spry Accordion Widget as a left nav menu with
    25 different panels. Some of my panels contain 10 different links
    and others contain only 1 single link. Therefore I would like to
    adjust the height of each panel individually according to the
    number of links they contain, so I don't end up with huge white
    spaces in panels that contain fewer links. My initial idea, in
    addition to the .AccordionPanelContent class was to add an "id" to
    each panel and control each panels height through CSS. But for some
    reason I haven't been successful that way. It looks like all panels
    tend to take the height of the first panel, regardless of their
    individual set heights. I wonder if I can resolve my problem
    uniquely with CSS, or I do I have to go and change something in the
    SpryAccordion.js file.
    Thanks.

    Hi Donald, I inserted <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", {
    useFixedPanelHeights: false });
    </script> into my code. It's almost there, but not
    quite. I can see that it is trying to re-ajust the panels' height,
    but for panels that have a larger content it tends to show the
    whole panel's content and then hides the half of it. Also for
    panels with fewer content it doesn't seem to have an effect at all.
    I don't know if I have to fix something in the CSS or place the
    Acc1 ID in a different location within my accordion HTML code.
    Thank you.
    Here's the URL I'm working on if you want to take a look.
    http://64.49.218.100/product_p/00-120-0ll.htm

  • Spry Accordion letztes Panel speichern

    Hi,
    ich habe auf der Seite www.hittfeld-sharks.de das Spry Accordion verwendet.
    Wenn man sich dort allerdings links durch die Mannschaften klickt ist es ziemlich nervig, dass sich immer wieder das defaultPanel öffnet. Kann man das umstellen, dass sich "beim ersten Öffnen" das default Panel öffnet, aber dann immer das, welches als letztes offen war ?
    Greets

    PHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
    Having said that, you need to have a Spry dataset in your Accordion panel.
    By following these steps, you will be well on your way to achieving what you want.
    Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
    Create a SpryHTMLDataSet based on the HTML-table
    Use the data from the Spry dataset to create a master/detail region in your Accordion panel
    Just a few questions before I go into details.
    Have you set up a connection to a database, thus be able to retrieve the data?
    Why do you need an Accordion panel to show your data?
    Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
    Please come back here with your answers and we shall try to help you on your way
    Ben

  • How to make Spry Accordion Content Panel with a variable content fit

    I have a problem.  The content panel has a fixed length so I changed it to auto so I can view all the content of each panel.  The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels.  So as you click from one to the other, some are practically empty with all the space, while others seem full. 
    The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size.  This is the way I have the CSS for that.  How can I achieve the variable heights?
    .AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 5px 4px 6px 15px;
    height: auto;
    background: url(../images/backgrcolor0033.png);
    color: #FFF;
    Thank you.

    <!DOCTYPE HTML>
    <html>
    <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="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 type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });</script>
    </body>
    </html>
    Gramps

  • Spry accordion open panel

    Hello,
    is there a way, that if I have a page without the accordion, and I click on that page a link, that link goes to the accordion panel page, and when it goes, specifically opens one of the pannels.
    THank you

    Yes.  But you need the SpryURLUtils.js files.  And you won't find them on Adobe Labs anymore because Adobe abandoned Spry last year.  The files have been moved to GitHub.
    Tutorial:
    http://foundationphp.com/tutorials/spry_url_utils.php
    Spry Files:
    Adobe GitHub account
    Nancy O.

  • Spry Accordion Navigation Panel Behavior in Dreamweaver eLearning Template

    I am trying to create an eLearning course using the "SoftSkills" eLearning Template provided by Dreamweaver. I have created several extra div tags to set up extra titles on the tabbed accordion, however, regardless of how I set the variable "AccOpenPanel" here:
    <!-- TemplateParam name="accOpenPanel" type="number" value="0" -->
    all of the panels are displaying as open. I would like to have panel 2 open and all others closer. I'm sure there's a simple fix for this, but I can't find it. Actually I can't find any help for using this template, which I'm sure exists. Any suggestions?  Below is a sample of my accordion code:
              <div id="sidebar">
          <h1>Table of Contents</h1>
          <div class="contentArea">
            <div id="Accordion1" class="Accordion" tabindex="0">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">Welcome</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <!-- Add the .current class to the <a> tag for the current page -->
                    <li><a href="../index.html">Introduction</a></li>
                    <li><a href="../organization.html">Organization</a></li>
                  </ul>
                </div>
              </div>
            <div id="Accordion2" class="Accordion" tabindex="1">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">4</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <li><a href="../s1_001.html" class="current">Process Presentation</a></li>
                    <li><a href="../s1_002.html">Scenario 1</a></li>
                    <li><a href="../s1_003.html">Additional Information</a></li>
                    <li><a href="../s1_004.html">Scenario 2</a></li>
                    <li><a href="../s1_005.html">Self-check</a></li>
                  </ul>
                </div>
              </div>
              </div>
            <div id="Accordion3" class="Accordion" tabindex="2">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">2</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <li><a href="../s2_001.html">Introduction</a></li>
                    <li><a href="../s2_002.html">Real Life Video</a></li>
                    <li><a href="../s2_003.html">Key Points</a></li>
                    <li><a href="../s2_004.html">Interactive Presentation</a></li>
                    <li><a href="../s2_005.html">Self-check</a></li>
                  </ul>
                </div>
              </div>
              </div>
            <div id="Accordion4" class="Accordion" tabindex="3">
                        <div class="AccordionPanel">
                <div class="AccordionPanelTab">3</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <li><a href="../s3_001.html">Introduction</a></li>
                    <li><a href="../s3_002.html">Real Life Video</a></li>
                    <li><a href="../s3_003.html">Key Points</a></li>
                    <li><a href="../s3_004.html">Interactive Presentation</a></li>
                    <li><a href="../s3_005.html">Self-check</a></li>
                  </ul>
                </div>
              </div>
        </div>
        <div id="Accordion5" class="Accordion" tabindex="4">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab">4</div>
                <div class="AccordionPanelContent">
                  <ul>
                    <li><a href="../s4_001.html">Introduction</a></li>
                    <li><a href="../s4_002.html">Real Life Video</a></li>
                    <li><a href="../s4_003.html">Key Points</a></li>
                    <li><a href="../s4_004.html">Interactive Presentation</a></li>
                    <li><a href="../s4_005.html">Self-check</a></li>
                  </ul>
                </div>
              </div>
        </div>

    The code that you have shown is not the problem, despite my wondering why you have created a new accordion for each panel. Also you have not shown the links to the support files (JS and CSS) nor have you shown the constructor for each of the accordions, but I assume that you have attended to these matters and did not think it worthwhile to show the code.
    Personally, I would have created one accordion with four panels, but this is a matter of choice.
    Gramps

  • Spry Accordion Panel Default State All Closed?

    Is it possible to set a group of Spry accordion panels so
    that all are closed by default?

    Steven_K wrote:
    > Is it possible to set a group of Spry accordion panels
    so that all are closed by default?
    Yes, a Google search for "Spry accordion all closed" brings
    up this as
    the first result:
    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
    David Powers, Adobe Community Expert
    Author, "The Essential Guide to Dreamweaver CS3" (friends of
    ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

  • How to make no panels on Spry accordion open by default?

    I have a Spry Accordion with several panels.  I want the default behavior for none of the panels to be opened until one is clicked.  Currently the default behavior is for the first panel to be automatically expanded when the page is first visited.  How do I correct this?

    It's here:
    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
    Under the sub heading "starting with all panels closed".
    <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
    </script>
    Martin

  • Spry panel - the first panel opens by default on entering the site

    The first panel is open on default, I can close it, and access the others, but whenever i go there for the first time, its open.  I want vistors to see the front page with all three panels closed.   http://www.diocesanministriesfund.org  
    Also, not a big deal, but when you close one of the panels and return to the index page, it seems like the whole page gets stuck for a second and then renders.
    Any help is appreciated, as always, Mary

    Hi Mary
    In this line near the bottom of your document you have
    var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:0});
    This is where you have told the accordion to open the first panel. If you want all panel closed then make the default panel a non-existing panel as in
    var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:-1});
    Gramps

  • Start Accordion all closed

    I am putting in an accordion and want all panels to start as closed.  All the info I can find is about setting the default open panel.  I don't want a default open panel; I want all panels closed to start.  Can this be done?

    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed

  • Spry Accordion

    First time using Spry. Anyone know why my accordion panels
    wont close after a second click. Below is the html. I used the
    Starting with All Panels Closed code.
    <!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>
    <style type="text/css">
    <!--
    .style12 {
    color: #FFFFFF;
    font-size: 12px;
    padding-left: 35px;
    font-family: Arial, Helvetica, sans-serif;
    padding-right: 30px;
    font-weight: normal;
    text-transform: none;
    .style13 { font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: normal;
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #FFFFFF;
    background-position: 0px;
    padding-top: 10px;
    body {
    background-color: #999999;
    a:link {
    color: #FFFFFF;
    text-decoration: none;
    a:visited {
    text-decoration: none;
    a:hover {
    text-decoration: none;
    color: #999999;
    a:active {
    text-decoration: none;
    -->
    </style>
    <script src="SpryAssets/SpryAccordion.js"
    type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
    type="text/css" />
    </head>
    <body>
    <table width="1023" height="951" border="0"
    align="center" background="bg/Picture 2.jpg">
    <tr>
    <th colspan="5" rowspan="2"
    scope="col"> </th>
    <th width="61" height="70"
    scope="col"> </th>
    <th colspan="3" scope="col"> </th>
    </tr>
    <tr>
    <th width="61" height="28" class="style13"
    scope="col">ENGLISH</th>
    <th width="1" scope="col"> </th>
    <th width="62" scope="col"><span
    class="style13">SPANISH</span></th>
    <th width="11" scope="col"> </th>
    </tr>
    <tr>
    <th height="32" colspan="5"
    scope="col"> </th>
    <th width="61" scope="col"> </th>
    <th colspan="3" scope="col"> </th>
    </tr>
    <tr>
    <td height="46" colspan="9"><div align="left"
    class="style12">
    <div align="left">This site has been created to
    download 2009 Honda Pilot files in high / low resolution. If you
    need any further assistance, please contact your Honda
    representative.</div>
    </div></td>
    </tr>
    <tr>
    <td width="200" height="23"> </td>
    <td width="189"> </td>
    <td width="201"> </td>
    <td width="193"> </td>
    <td colspan="5"> </td>
    </tr>
    <tr>
    <td height="133" nowrap="nowrap"><div
    id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">
    <div align="right"><strong>AD
    CAMPAIGN</strong></div>
    </div>
    <div class="AccordionPanelContent">
    <ul>
    <li>Color</li>
    <li>Black &amp; White</li>
    </ul>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">
    <div
    align="right"><strong>FLYERS</strong></div>
    </div>
    <div class="AccordionPanelContent">
    <ul>
    <li>HI-Res</li>
    <li>Low-Res</li>
    </ul>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">
    <div
    align="right"><strong>BANNERS</strong></div>
    </div>
    <div class="AccordionPanelContent">
    <ul>
    <li>Night Version
    <ul>
    <li>Hi-Res</li>
    <li>Low-Res</li>
    </ul>
    </li>
    <li>Day Version
    <ul>
    <li>HI-Res</li>
    <li>Low-Res</li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div></td>
    <td width="189" rowspan="2"> </td>
    <td rowspan="2"> </td>
    <td width="193" rowspan="2"> </td>
    <td colspan="5" rowspan="2"> </td>
    </tr>
    <tr>
    <td nowrap="nowrap"> </td>
    </tr>
    <tr>
    <td nowrap="nowrap"> </td>
    <td width="189"> </td>
    <td> </td>
    <td width="193"> </td>
    <td colspan="5"> </td>
    </tr>
    <tr>
    <td nowrap="nowrap"> </td>
    <td width="189"> </td>
    <td> </td>
    <td width="193"> </td>
    <td colspan="5"> </td>
    </tr>
    </table>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    //-->
    </script>
    </body>
    </html>

    You need to update to the latest version of SpryAccordion.js.
    You can find it here:
    http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js
    If you are a Dreamweaver user, use the Spry 1.6.1 Updater
    which you can get from here:
    http://labs.adobe.com/technologies/spry/home.html
    --== Kin ==--

  • Spry Accordion On Click

    How can you get the spry accordion to open and close on a
    mouse click? Also, we do not want the first tab to be opened. We
    would like the user to click on the tab first then it should
    open.

    shawnBerger wrote:
    > How can you get the spry accordion to open and close on
    a mouse click? Also, we do not want the first tab to be opened. We
    would like the user to click on the tab first then it should open.
    You can set which panel to open in the code that creates the
    Accordion panel:
    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
    If you do not want any panel to be opened when the page
    loads, take a look at the "Starting with All Panels Closed" sample.
    If you want a panel to open and close with a click, rather
    than having to click on another panel in the accordion, then take a
    look at the "Programatically Opening and Closing Panels" sample.
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

Maybe you are looking for