Accordion Default Panel

Is there a way to set all Spry Accordion panels closed? I
have set the js variable defaultPanel to null and no panels open
but I loose animation. My goal is to nest accordion panels and have
only the selected panel open when I click on it. Is this
possible?

Similar Messages

Accordion Default Panel Based on Date

I created an accordion panel with a Spry dataset consisting of elements relating to an event schedule. By default, I have all content panels closed, but I would like to set the default content panel based on an event's date.
So, if the first event is on September 7, I would like the content panel open for the September 7 event (through the end of that day). On September 8th, I would like the next event's content panel open through that date and so on.
It looks like I'll need to set a javascript date conditional, then loop through the dataset with "addObserver" and have it set the default panel through scripting in the widget javascript.
Anyone have specific insight on how to accomplish this?
Much Thanks,
Colin
Here's my basic code:
                                <div style="width:622px" id="Acc1" class="Accordion" tabindex="0">
                                    <div spry:repeat="ds1" class="AccordionPanel">
                                    <div class="AccordionPanelTab" >
                                        <div class="rowsched" spry:even="schedeven" spry:odd="schedodd" spry:hover="schedhover">
                                        <ul style="display:inline;padding-left:4px">
                                            <li class="rositem" style="left:13px"><span spry:content="{Date}"></span></li>
                                            <li class="rositem" style="left:155px"><span spry:content="{Opponent}"></span></div> </li>
                                            <li class="rositem" style="left:310px"><span spry:content="{Location}"></span></li>
                                            <li class="rositem" style="left:455px"><span spry:content="{TV}"></span></li>
                                            <li class="rositem" style="left:555px"><span spry:content="{Time}{result}"></span></li>
                                          </ul>
                                    </div>
                                    </div>
                                    <div class="AccordionPanelContent">
                                        <div style="color:#000000"><img src="{icon}" alt="{Opponent}" width="100" height="67" /> Other content goes here</div>
                                  </div>
                                  </div>
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>

You should be able to retrieve the value of other valueset using :$FLEX$.<valuesetname> I'm not sure about the exact syntax, it's been a while since i worked with applications.

Spry Accordion default panels

Hello,
I have been trying to get the panels on the Spry Accordion to open while on the corresponding pages. I have tried setting the default panel to the corresponding panel number, but that does not work. Right now I have all of the panels set to -1 so they are all closed initiall. The only one I get to stay open is when I set it to 0, then my first panel will stay open, but if I try 1, 2, 3, etc. nothing happens.
I really appreciate any help with this, I am a student and this web portfolio is part of a requirement and I would love to get it so funtion properly.
Thank you,
Jessica
here is my url
http://jessicaallen.us/portfolio_2/index.html
Here is what I have in my Accordion CSS styles
@charset "UTF-8";
/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
.Accordion2 {
    font-family:"Trebuchet MS", Geneva, Arial, helvetica, san-serif;
    color:#666;
    margin-left:0px;
    margin-right:20px;
    width:260px;
    border:none;
    overflow: hidden;
.AccordionPanel {
    margin-left: 0px;
    margin-right:20px;
    margin-bottom:0px;
    padding: 0px;
.AccordionPanelTab {
    color:#666;
    font-weight:bold;
    font-size:14px;
    line-height:18px;
    background-color:transparent;
    border:none;
    margin-left: 10px;
    margin-bottom:0px;
    margin-right:-40px;
    padding: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    text-align:right;
.AccordionPanelContent {
    font-size:12px;
    line-height:14px;
    color:#666;
    overflow: auto;
    margin: 5px -40px 5px 20px;
    padding: 0px;
    text-align:right;
.AccordionPanelContent p{
    margin-top:0.5em;
    margin-bottom:0.5em;
.AccordionPanelContent p a:visited{
    color:#ff9a00;
.AccordionPanelOpen .AccordionPanelTab {
    color:#f15922;
    background-color: #fff;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #f15922;
.AccordionFocused .AccordionPanelTab {
    background-color: #fff;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background-color: #fff;

Jessica,
First of all, I hate you. Perfect web page design, perfect colour co-ordination, perfect drawings not to mention perfect age. It makes this old codger wonder where he has gone wrong
Having gotten that off my chest, the problem is that you have two constructors for the same object as per
<script type="text/javascript">

</script>
<script type="text/javascript">
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
Just get rid of the first one and apply the correct panel number, for example Fine Arts use
<script type="text/javascript">
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { useFixedPanelHeights: false, defaultPanel: 6 });
</script>
Gramps

Spry accordion default panel

I want to set pages of a website so certain panels are
already open as the default tab when a visitor selects the page.
I have pasted this text after the existing script at the end
of my document:
<script type="text/javascript">
var acc8 = new Spry.Widget.Accordion("Accordion1", {
defaultPanel: 2 });
</script>
Which ought to open panel 3 when the page loads but is
doesn't open ANY panels! all it does is indicate the tab as
'selected' If I change the defaultPanel: to read 0 it correctly
opens the top panel, but refuses to work for any other panels.
Here is the site where the script should work:
http://www.copenhagencandles.co.uk/new/
Clicking on any of the links in the accordian takes you to
the correct page, but each time the accordian displays
closed!

This is the URL
/est_help.htm?tab=2&acc3=2
and this is the markup
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script> var params = Spry.Utils.getLocationParamsAsObject(); </script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Label 1.1</div>
            <div class="AccordionPanelContent">Content 1.1</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Label 1.2</div>
            <div class="AccordionPanelContent">Content 1.2</div>
          </div>
        </div>
    </div>
    <div class="TabbedPanelsContent">
        <div id="Accordion2" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Label 2.1</div>
            <div class="AccordionPanelContent">Content 2.1</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Label 2.2</div>
            <div class="AccordionPanelContent">Content 2.2</div>
          </div>
        </div>
    </div>
    <div class="TabbedPanelsContent">
        <div id="Accordion3" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Label 3.1</div>
            <div class="AccordionPanelContent">Content 3.1</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Label 3.2</div>
            <div class="AccordionPanelContent">Content 3.2</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Label 3.3</div>
            <div class="AccordionPanelContent">Content 3.3</div>
          </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.acc1 ? params.acc1: 0});
var Accordion2 = new Spry.Widget.Accordion("Accordion2", {defaultPanel: params.acc2 ? params.acc2: 0});
var Accordion3 = new Spry.Widget.Accordion("Accordion3", {defaultPanel: params.acc3 ? params.acc3: 0});
</script>
</body>
</html>

Accordion - default panel not working

Hi, I'm using this script so the second panel is open by default, but it's not working (all the panels appear close by default)
<script type="text/javascript">

</script>
I can't figure out what's wrong.
Here's the live page: http://www.apokrisis.com/client-projects/npfmc2010/public-meetings/committees-related-meet ings.html
Thanks for your help!
MWhitt

Your code is this
<script type="text/javascript">

</script>
but should be this
<script type="text/javascript">

</script>
Accordion3 and Accordion4 lines mixed up
Carl

Spry Accordion default panel in Master Detail Page

Hi everyone,
First time post and need a little help.
I created a SQL database and put the recordsets in a spry accordion panel as the master section. I have another spry accordion that is my detail section. When I open up the panels in the master section and click on any of the records, it updates the detail region just fine. I did this by passing the record set using php which I don't know, to the detail region. So far, great.
What I now need to do is when I open a panel, I want that panel to stay open. This dosen't seem to work regardless what I do. I believe that in passing the recordset set between the two regions, it is refreshing the page. I tried using code to pass the panel number too but this is not working.
Here is the an example of one of the panels.
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><h3>Doctor Who</h3></div>
    <div class="AccordionPanelContent">
        <table width="385" border="0" class="AccordionPanel" id="content1">
          <?php do { ?>
            <tr>
            <td >
               <a id="content1" href="?recordID=<?php echo $row_Doctor_Who['prod_key_name']; ?>&panel=1"; > <?php echo $row_Doctor_Who['video_name']; ?></a>
               </td>
            </tr>
            <?php } while ($row_Doctor_Who = mysql_fetch_assoc($Doctor_Who)); ?>
        </table>
    </div>
</div>
<script type="text/javascript">

</script>
If someone can give me some pointers that would be great. I was also thinking of redoing my menus so when a user clicks on an entry, it will open up another page with that panel open or even going to another section of the same page. I'm not a php programmer and taken a beginners class in HTML and Javascript so if you can keep things simple that would be great.
Thanks soo much for helping out if you can!

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

Set Accordion Default Panel in URL

I am making a function call like this
window.open('events.php?Accordion1.defaultPanel=3',
'_parent')
My goal is for the the user to click a button, go to the
events page (events.php) and automatically open a specific panel in
the accordion widget.. I cannot make the above code work.

Hi Marlene,
First read the following tutorial to understand what you
should do to
achieve what you want.
http://foundationphp.com/tutorials/spry_url_utils.php
If you haven't upgraded your spry version, the link to
download the zip
file
http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_spry
it's not working at the moment. If you want it I can email to
you, just
give me an email address or email to V1 Fusion to info [at]
3rd-Eden
[dot] com. He offered to send the file in another thread.
Just let us know it!
Cheers
Marlene escribiÃ³:
> I am making a function call like this
> window.open('events.php?Accordion1.defaultPanel=3',
'_parent')
>
> My goal is for the the user to click a button, go to the
events page
> (events.php) and automatically open a specific panel in
the accordion widget..
> I cannot make the above code work.
>

Why default panel in Spry Accordeon doesnt work ?

The solution do the default panel when a new page is loaded seems to be:
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { defaultPanel: x });
</script>
(x=number of the panel minus 1)
This is written in many tutorials.
But i've tried and only works with default panel 0. When i try with
number 2 for instance, the head/tab is marked but doesnt expand.
Anyone knows what's wrong ?

I don't see any defaultPanel options in your constructor..
<script type="text/javascript">

</script>
Should be:
<script type="text/javascript">

</script>
Keep in mind that default panels are zero based, so panel 1 is actually panel 0.

How to hide the default panels of a dreamweaver spry tabbed panel?

i put several spry tabbed panels in the same page (one widget inside the other). the problem is that when the page loads all of the default panels (4 in total) appear for about 6 seconds and then they collapse into the main pannel. how do i fix this?
you can see this problem in this page:
http://www.eye-dealswing.com/Parents/WhereToStay/index1.html
do i need to add something in this section?
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
thank you
Alejandra

im sorry, i dont understand what you mean. i am using the tabbed panels spry and not the accordion. i am just a rookie with html coding. can you please explain me what do i need to do?
thank you very much
Alejandra

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

Using a non-default Panel

I have created a new panel called abc_panel which contains only the Last Name, First Name, Company Name, and Mail. I set the Attribute Access policies to Read/Modify for
anyone/self at the dc=company, dc=com level. When I go to the "My
Profile" page in view mode and select my new Panel, I can see the attributes to which I have read access. When I click the Modify button, the page is redisplayed with the
appropriate buttons (Save, Cancel, etc), but the attributes are not displayed.
Niether the field label or the fields themselves are displayed.
I assume that there is some configuration that I have not done yet which allows me to modify attributes in a panel that is not the Default Panel. By the way, all the
attributes are viewable and editable in the Default Panel regardelss of the
Attribute Access settings.
Any ideas?

I have created a new panel called abc_panel which contains only the Last Name, First Name, Company Name, and Mail. I set the Attribute Access policies to Read/Modify for
anyone/self at the dc=company, dc=com level. When I go to the "My
Profile" page in view mode and select my new Panel, I can see the attributes to which I have read access. When I click the Modify button, the page is redisplayed with the
appropriate buttons (Save, Cancel, etc), but the attributes are not displayed.
Niether the field label or the fields themselves are displayed.
I assume that there is some configuration that I have not done yet which allows me to modify attributes in a panel that is not the Default Panel. By the way, all the
attributes are viewable and editable in the Default Panel regardelss of the
Attribute Access settings.
Any ideas?

Bug: Default Panel width on Photoshop CS5 12.0.2 (all CS5 products?)

Hi!
It seems, the Photoshop CS5 12.0.2 update sets the default panel's width to 10 px on Mac.
When I clean install the panel on new Photoshop it first opens like a thin line about 10 px width
and about 300px height. It looks very strange and some people cannot scale it back with ease.
(On Windows the 132px problem persists (bug #9 from here) even after update - panel cannot be scaled less than
132px)
Thanks
Update: This behaviour is also confirmed on Illustrator CS5, so I guess it's a wider thing connected to the latest update of some CS5 component.

OK, I found the source of this bug.
minWidth. When you set minWidth on CSXSWindowedApplication with the latest updates to CS5, the suite will strangerly resize your panel to this minWidth whenever you try to set this.width. I will post it to the list of bugs.
The test case is very simple:
<csxs:CSXSWindowedApplication minWidth="10" applicationComplete="on_creation_complete()" xmlns:csxs="com.adobe.csxs.core.*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" historyManagementEnabled="false">
    <mx:Script>
        <![CDATA[
             private function on_creation_complete(): void
                // the following line will scale the panel to its minWidth value instead of 500
                this.width = 500;
                this.height = 500;
        ]]>
    </mx:Script>
    <mx:VBox height="100%" width="100%" verticalAlign="middle" horizontalAlign="center">
    </mx:VBox>
</csxs:CSXSWindowedApplication>

Combining image and text in accordion content panel

Hello,
I'm having difficulty displaying image and text together within an accordion content panel. What I need is a thumbnail photo of a staff member plus a short bio. I've put a panel together so it displays as needed in Live View, but not in IE8, Foxfire8, or Chrome. I'm using Dreamweaver 5.5, Spry 1.6.1, Windows 7.
Here's the code for the panel that includes an image not displaying:
<div class="AccordionPanel">
<div class="AccordionPanelTab">Stan Swiercz, Training Manager</div>
<div class="AccordionPanelContent">
<div class = "PanelImage"> <img src="/images/StanSwiercz.jpg"/></div>
Bio text goes here</div>
</div>
Here's a link to a test page (ignore funky color variations, still settling those). The panel that is set to open should display an image floating left with text wrapping, as it does in Live View.
http://cet-training.org/Test%20folder/people.html
I''ve double-checked documentation, help, and done searches, but can't find any information about what should be an easy thing to do. Any help out there?
Thank you very much,
George

The location of the image is http://cet-training.org/Test%20folder/images/StanSwiercz.jpg (click the link to see the image)
This is the markup from your document <img src="/images/StanSwiercz.jpg"/> which means that the image is located in the images folder which is located in the root directory.
Hence the image cannot be found by your document.
The following are possible solutions, please choose one only
change the location of the images folder to reside in the root directory
delete the leading slash from the link as in <img src="images/StanSwiercz.jpg"/>
change the link to an absolute value as in <img src="http://cet-training.org/Test%20folder/images/StanSwiercz.jpg"/>
Gramps

Accordian default panel

I'm using a Spry Accordian in Dreamweaver CS5 and cannot get the a default panel to work properly. No matter what I do it just doesn't work and always displays the first panel as open. I'm following the instructions here:
http://labs.adobe.com/technologies/spry/articles/accordion_overview/

Here is a page in development:
http://startreksoundtracks.com.s134653.gridserver.com/tng/tng-lala-1.html
I've made some progress by moving the script into the body, which results in all panels closed. This is better than always having the top panel open, but still not the behavior I want. In the above example the "Star Trek: The Next Generation" panel (panel 1) should be open, but it is not.
In IE9 the panel opens for a fraction of a second and then collpases. I don't see this behavior in other browsers.

Accordian Set Default Panel Issues

I have a default panel that I am setting in my pages and when
I set default panel to 0 then it opens the first one, but now when
I try to set default panel to 1 it won't open the second one.
http://208.112.121.107/company/mission-statement.asp
(This has the default panel set = 0, Works!)
http://208.112.121.107/company/management-team.asp
(This has the default panel set = 1, doesn't work)
Any help would be appreciated.
Thanks!

Nevermind I figured it out!

Accordion Default Panel

Similar Messages

Maybe you are looking for