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?

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.

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.

Accordion Spry Widget default loading behaviour

Am using the accordion spry widget to display some
spring/summer courses and
I need all panels closed when the page first loads. I've
tried to find the
relevant code, but have not been successful in changing it to
make this
work. If I change the behaviour of the 'this.defaultPanel'
the whole
accordion stops working. How can I change the accordion
behaviour to have
all panels closed at page load?
Thanks for any help.
Marianne

Hello! I have been reading up on this and playing around with
the code for a few hours now and I can't seem to make it work.
Basically I would like to have the accordion load collapsed, and
get rid of the fixed height. Any clue what I'm missing?
Thanks!
Hello! I have been reading up on this and playing around with
the code for a few hours now and I can't seem to make it work.
Basically I would like to have the accordion load collapsed, and
get rid of the fixed height. Any clue what I'm missing?
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Lorem Ipsum : about us</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="css/main.css" rel="stylesheet" type="text/css"
/>
<style type="text/css">

</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
<style type="text/css">

</style></head>
<body
onload="MM_preloadImages('images/menu_images/nav_a2_f2.jpg','images/menu_images/nav_a3_f2 .jpg','images/menu_images/nav_a4_f2.jpg','images/menu_images/nav_a5_f2.jpg','images/menu_i mages/nav_a6_f2.jpg')">
<div id="homebg">
<div id="spry1">
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry1.jpg" width="747"
height="35" alt="Vision / Purpose / Mission" /></div>
<div class="AccordionPanelContent">
<table width="744" height="179" border="0">
<tr>
<td width="95" height="175"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Vision:</strong>
Lorem Ipsum Dolor</p>
<p><strong>Purpose:</strong> Lorem ipsum
dolor.</p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry2.jpg" width="746"
height="34" alt="Guiding Principles / Core Values"
/></div>
<div class="AccordionPanelContent">
<table width="744" height="388" border="0">
<tr>
<td width="95"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Integrity</strong><br
/>
Lorem Ipsum</p>
<p><strong>Understanding</strong><br
/>
Lorem Ipsum</p>
<p> <strong>Innovation</strong><br
/>
Lorem Ipsum</p>
<p><strong>Perseverance</strong><br
/>
Lorem Ipsum</p>
<p><strong>Simplicity</strong><br />
Lorem Ipsum</p>
<p> <strong>Lorem
Ipsum</strong></p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry3.jpg" width="746"
height="34" alt="Lorem Ipsum" /></div>
<div class="AccordionPanelContent">
<table width="744" height="388" border="0">
<tr>
<td width="95"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Lorem
Ipsum</strong><br />
<br />
<br />
<a href="mailto:blahblah</a></p>
<p><strong>Lorem Ipsum</strong><br
/>
<br />
<br />
<a href="mailto:blahblah"</a></p>
<p><strong></strong><br />
Manager<br />
9<br />
<a href="mailto:blahblah</a></p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
</div>
<h6></h6>
</div>
<div id="text">
<h1>about us
<p>Lorem Ipsum </h1>
<p> </p>
</div>
<img src="images/bg_images/bg_interior.jpg" width="1374"
height="931" /></div>
<script type="text/javascript">

</script>
</body>
</html>

[Accordion] Open and Close Panel

http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
They look at the example "Starting with All Panels Closed",
double click in
"Panel 1" (open/close).
How to make this?
I have Spry 1.5 (DW_CS3), my code is identical to the
example, but it does
not close.

By yes you mean that you copied the files or that you have an
URL? :)
Could you please make sure that you don't have a browser/web
server/proxy server cache problem? Try to open in the browser the
JavaScript directly and on top you should see the Spry pre-release
version 1.5. This behavior of the accordion didn't exists in Spry
1.4 and when the -1 option was used an JavaScript error message
appeared.
We need to see a link to the page to see why the page is not
working because we don't know to duplicate this issue localy. If
the information on the page is more sensitive you can contact
either Kin or me using the private messages from the forum.
Cristian

Accordion Spry is defaulting to all tabs open. What's wrong?

Hi,
I had my accordion spry working perfectly a week ago. Then, I tried to add another panel at the top, and all of a sudden all tabs default open. I'd like them to go back to all being closed on default. I've been over my coding again and again for a week and can't figure out what I did wrong. I can get the first panel to close on default by changing the default panel to -1, but that only makes the other panels look odd for being open. Here's my code shortened to the important parts:
<div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
       <div class="AccordionPanelTab">Create Your Own Art Course</div>
        <div class="AccordionPanelContent">
          <p>Wouldn't you love...
(rest of content + 5 more tabs)
</div><script type="text/javascript">

</script>
my url is: http://www.7elementsBR.com/courses
Can anyone help me figure this puzzle out? Thank you.

C F McBlob wrote:
There are SEVERAL paragraph tags that are "unclosed". That can throw the whole Spry function off.
No, it can't. The closing tag of a paragraph is optional. The reason it's triggering an error in the W3C validator is because an XHTML doctype is being used. Many of the other "errors" are caused by the JavaScript being read by the validator as though it were HTML.
However, you're right about unclosed tags. The problem with the accordion is being cause by incorrectly nested divs.
This is how the content div should look:
<div class="content">
    <h1>Courses (Fall 2013) </h1>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
       <div class="AccordionPanelTab">Create Your Own Art Course</div>
        <div class="AccordionPanelContent">
          <p>Wouldn't you love being in a class with your friends/family learning exactly what you like learning and on your schedule? You can customize what materials you use, how often you come, the time you come, studying only abstract or realism, maybe a little bit of everything? Price is determined by your selections.
          <p><a href="customcourse.html">Custom Course Form</a><br />
        </div>
        </div> 
        <div class="AccordionPanel">
        <div class="AccordionPanelTab">Basic Art (ages 6 - 12)</div>
        <div class="AccordionPanelContent">
          <p>Mondays 4:30 - 6pm (No longer accepting Fall registrations.)     </p>
          <p>Students will get to sample these various mediums: pencil, charcoal, soft pastel, oil pastel, printmaking, watercolor, and acrylic painting. We will explore all 7 elements of art in order to create a good foundation for our young artists. Students are welcome to bring papers or canvas to create on, or feel free to visit the <a href="shop.html">shop</a>. All mediums are available for use and are included in the price. Course begins August 12.</p>
          <p>16 sessions, 4 free punch cards, $55/month<br />
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Drawing (ages 6+)</div>
        <div class="AccordionPanelContent">
        <p>Thursdays 4:30 - 6pm (No longer accepting Fall registrations.)</p>
          <p>Students will learn the 7 elements of art through various drawing tools including: pencil, charcoal, soft pastel, and oil pastel. This is a class based on realism first, and finding your own style as an artist later. Students are welcome to bring papers to draw on, or feel free to visit the shop. All mediums are available for use and are included in the price. Course begins August 15.</p>
          <p>16 sessions, 4 free punch cards, $55/month<br />
        </p></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Open Studio </div>
        <div class="AccordionPanelContent">
        <p>Monday - Friday, 12 - 4pm (Call ahead of time @ 225.366.7442)</p>
          <p>This course is all about the artist as an individual. Instruction is not provided, and artists may come and go as pleased. Weekly critiques are Fridays 3 - 4pm and are not mandatory, but allow for feedback from multiple artists and provide answers for you to grow as an artist. Artists may work with any medium, and may choose to rent media for $5/hour. The studio is not open on 1st Fridays, holidays, Easter week, Halloween week, Thanksgiving week, or Christmas week. </p>
          <p>Pricing: $5/hour or FREE for current students</p></div>
      </div>
            </div> 
            <script type="text/javascript">

</script>
    
    <p> </p>
    <p><a href="referafriend.html"><img src="images/refer.gif" alt="refer a friend" width="228" height="64" longdesc="images/refer.gif" align="right" /></a></p>
</div>

The unclosed paragraph tags should also be fixed, but what's causing the problem with the accordion is incorrectly nested divs.

Spry Accordion how to open on load panels closed

I'm having problems with spry accordion on load panels closed. I tried putting the changing the var in the javascript usedFixedPanelHeight: false:, and that didn't work. The box would come up saying that this javascript will not work for this accordion. I tried *Closed* in the accordion div tag and that didn't work. Can someone help me please. I'm trying to load panels closed.
Thanks for your help.

I was looking at that link you gave before I submitted this post. It wasn't very clear to me.
1. You say set the default panel set the defaultPanel option to - 1?. Where is the defaultPanel located? When I click the button to create a spry Accordion it only gives me options of creating panels. Is the defaultPanel panel located is the CSS tab?
2. The link you gave says closing panels only works with variable height. Can you tell me what is variable height? I looked at the code at this page to see if I could see what it was doing. I observed that the javascript at the bottom which is a variable was changed for the spry accordion. I copied and pasted code in my page and it didn't work.
I really trying to hard to figure this out. Thanks for your help.
Bobby

Spry Accord. Panel - How to make it closed Please help!

Hi, I would like to ask for your help with the following:
I made a spry accord. panel. I was wondering how to make the first tab being closed when I open up the following page. Somehow when I made it, it created that the first tab stays open all the time. I was wondering if I can make it being closed and only open when I click on the Artisan Collection.
Thank you so much for your help in advance! Agi
Here is the link and you will see the panel on the left handside:
http://mallinfurniture.com/browse_c01.html

Hi,
Thank you so much for the answers. I tried what you recommended. An error message came up saying the following. Also, I noticed something weird in my coding... Maybe that is why it is not working. I copy the coding as well. Thank you so much for taking the time to help me out!!!
Error message: "This document contains JavaScript code for a widget that no longer exists. If you don't remove the code, the browser might display JavaScript errors when loading the page. Would you like Dreamweaver to find all the instances of this code for you?" Ok, No.
When I click on Ok. Nothing happens. What am I doing wrong?
Coding - the end of my page:
<script type="text/javascript">

</script>
<script type="text/javascript">
 </script> </body>
</html>
It looks like I have double of that. When I removed the first accordion, all of my panels were opened...
What could ne wrong?
Thank you! Agi

Spry accordeon - all tabs must be closed in browser

Hi,
I made an accordeon with only pictures and I need to know where I can change the setting to close the first tab.
So that you only see all the tabs and no content. When the visitor clicks on a tab it needs to open.
The accordeon works but the first pannel is always open. I couldn't find an answer in the forum.
Thank you for answering me.
Carla

Hi Arnout,
I've got a part of my question answered but know I can't open the panels anymore.
The site is not yet online. The code below is what is in my html page.
!images/03 horeca/03-mediterraneo-tab.jpg|height=73|width=700|src=images/03 horeca/03-mediterraneo-tab.jpg!
Tag 1
!images/03 horeca/03-mediterraneo-content.jpg|height=803|width=700|src=images/03 horeca/03-mediterraneo-content.jpg!
!images/06 winkel/06-clou-show-tab.jpg|height=73|width=700|src=images/06 winkel/06-clou-show-tab.jpg!
Tag 2
!images/06 winkel/06-clou-show-content.jpg|height=395|width=700|src=images/06 winkel/06-clou-show-content.jpg!Inhoud 2
var Accordion1 = new Spry.Widget.Accordion("Accordion1", );
This is the spryAccordion.css
.Accordion {
     border-left: solid 0px gray;
     border-right: solid 0px black;
     border-bottom: solid 0px gray;
     overflow: hidden;
     width: 700px;
     padding: 0px;
     margin: 0px;
     text-decoration: none;
     color: #F00;
     height: inherit;
/* 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
/* This is the selector for the AccordionPanelTab. This container houses
the title for the panel. This is also the container that the user clicks
on to open a specific panel.
The name of the class ("AccordionPanelTab") used in this selector is not necessary
to make the widget function. You can use any class name you want to style an
accordion panel tab container.
.AccordionPanelTab {
     background-color: #000;
     margin: 0px;
     padding: 0px;
     cursor: pointer;
     -moz-user-select: none;
     -khtml-user-select: none;
     border-top-width: 0px;
     border-right-width: 0px;
     border-bottom-width: 0px;
     border-left-width: 0px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: black;
     border-bottom-color: gray;
     height: 73px;
     overflow: hidden;
     color: #F00;
.AccordionPanelTab span
/* 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
/* 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: #000;
/* 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 {
     text-decoration: none;
.AccordionPanelOpen .AccordionPanelTabHover {
/* 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 {
/* 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 {
This is the spryAccordion.js
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
     this.element = this.getElement(element);
     this.defaultPanel = 0;
     this.hoverClass = "AccordionPanelTabHover";
     this.openClass = "AccordionPanelOpen";
     this.closedClass = "AccordionPanelClosed";
     this.focusedClass = "AccordionFocused";
     this.enableAnimation = true;
     this.enableKeyboardNavigation = true;
     this.currentPanel = null;
     this.animator = null;
     this.hasFocus = null;
     this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
     this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
     this.useFixedPanelHeights = true;
     this.fixedPanelHeight = 0;
     Spry.Widget.Accordion.setOptions(this, opts, true);
     this.attachBehaviors();
Spry.Widget.Accordion.prototype.getElement = function(ele)
     if (ele && typeof ele == "string")
          return document.getElementById(ele);
     return ele;
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
     if (!ele || !className || (ele.className && ele.className.search(new RegExp("
b" + className + "
b")) != -1))
          return;
     ele.className += (ele.className ? " " : "") + className;
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
     if (!ele || !className || (ele.className && ele.className.search(new RegExp("
b" + className + "
b")) == -1))
          return;
     ele.className = ele.className.replace(new RegExp("
s*
b" + className + "
b", "g"), "");
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
     if (!optionsObj)
          return;
     for (var optionName in optionsObj)
          if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
               continue;
          obj[optionName] = optionsObj[optionName];
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
     if (panel)
          this.addClassName(this.getPanelTab(panel), this.hoverClass);
     return false;
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
     if (panel)
          this.removeClassName(this.getPanelTab(panel), this.hoverClass);
     return false;
Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
     var panelA = this.currentPanel;
     var panelB;
     if (typeof elementOrIndex == "number")
          panelB = this.getPanels()[elementOrIndex];
     else
          panelB = this.getElement(elementOrIndex);
     if (!panelB || panelA == panelB)
          return null;
     var contentA = panelA ? this.getPanelContent(panelA) : null;
     var contentB = this.getPanelContent(panelB);
     if (!contentB)
          return null;
     if (this.useFixedPanelHeights && !this.fixedPanelHeight)
          this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
     if (this.enableAnimation)
          if (this.animator)
               this.animator.stop();
          this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
          this.animator.start();
     else
          if(contentA)
               contentA.style.display = "none";
               contentA.style.height = "0px";
          contentB.style.display = "block";
          contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
     if(panelA)
          this.removeClassName(panelA, this.openClass);
          this.addClassName(panelA, this.closedClass);
     this.removeClassName(panelB, this.closedClass);
     this.addClassName(panelB, this.openClass);
     this.currentPanel = panelB;
     return panelB;
Spry.Widget.Accordion.prototype.closePanel = function()
     // The accordion can only ever have one panel open at any
     // give time, so this method only closes the current panel.
     // If the accordion is in fixed panel heights mode, this
     // method does nothing.
     if (!this.useFixedPanelHeights && this.currentPanel)
          var panel = this.currentPanel;
          var content = this.getPanelContent(panel);
          if (content)
               if (this.enableAnimation)
                    if (this.animator)
                         this.animator.stop();
                    this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
                    this.animator.start();
               else
                    content.style.display = "none";
                    content.style.height = "0px";
          this.removeClassName(panel, this.openClass);
          this.addClassName(panel, this.closedClass);
          this.currentPanel = null;
Spry.Widget.Accordion.prototype.openNextPanel = function()
     return this.openPanel(this.getCurrentPanelIndex() + 1);
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
     return this.openPanel(this.getCurrentPanelIndex() - 1);
Spry.Widget.Accordion.prototype.openFirstPanel = function()
     return this.openPanel(0);
Spry.Widget.Accordion.prototype.openLastPanel = function()
     var panels = this.getPanels();
     return this.openPanel(panels[panels.length - 1]);
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
     if (panel != this.currentPanel)
          this.openPanel(panel);
     else
          this.closePanel();
     if (this.enableKeyboardNavigation)
          this.focus();
     if (e.preventDefault) e.preventDefault();
     else e.returnValue = false;
     if (e.stopPropagation) e.stopPropagation();
     else e.cancelBubble = true;
     return false;
Spry.Widget.Accordion.prototype.onFocus = function(e)
     this.hasFocus = true;
     this.addClassName(this.element, this.focusedClass);
     return false;
Spry.Widget.Accordion.prototype.onBlur = function(e)
     this.hasFocus = false;
     this.removeClassName(this.element, this.focusedClass);
     return false;
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
     var key = e.keyCode;
     if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
          return true;
     var panels = this.getPanels();
     if (!panels || panels.length < 1)
          return false;
     var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
     var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
     while (nextPanel)
          if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
               break;
          nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
     if (nextPanel && currentPanel != nextPanel)
          this.openPanel(nextPanel);
     if (e.preventDefault) e.preventDefault();
     else e.returnValue = false;
     if (e.stopPropagation) e.stopPropagation();
     else e.cancelBubble = true;
     return false;
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
     if (!panel)
          return;
     var tab = this.getPanelTab(panel);
     if (tab)
          var self = this;
          Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
          Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
          Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
     try
          if (element.addEventListener)
               element.addEventListener(eventType, handler, capture);
          else if (element.attachEvent)
               element.attachEvent("on" + eventType, handler);
     catch (e) {}
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
     var content = this.getPanelContent(panel);
     if (isDefault)
          this.currentPanel = panel;
          this.removeClassName(panel, this.closedClass);
          this.addClassName(panel, this.openClass);
          // Attempt to set up the height of the default panel. We don't want to
          // do any dynamic panel height calculations here because our accordion
          // or one of its parent containers may be display:none.
          if (content)
               if (this.useFixedPanelHeights)
                    // We are in fixed panel height mode and the user passed in
                    // a panel height for us to use.
                    if (this.fixedPanelHeight)
                         content.style.height = this.fixedPanelHeight + "px";
               else
                    // We are in variable panel height mode, but since we can't
                    // calculate the panel height here, we just set the height to
                    // auto so that it expands to show all of its content.
                    content.style.height = "auto";
     else
          this.removeClassName(panel, this.openClass);
          this.addClassName(panel, this.closedClass);
          if (content)
               content.style.height = "0px";
               content.style.display = "none";
     this.attachPanelHandlers(panel);
Spry.Widget.Accordion.prototype.attachBehaviors = function()
     var panels = this.getPanels();
     for (var i = 0; i < panels.length; i++)
          this.initPanel(panels[i], i == this.defaultPanel);
     // Advanced keyboard navigation requires the tabindex attribute
     // on the top-level element.
     this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
     if (this.enableKeyboardNavigation)
          var self = this;
          Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
          Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
          Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
Spry.Widget.Accordion.prototype.getPanels = function()
     return this.getElementChildren(this.element);
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
     return this.currentPanel;
Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
     var panels = this.getPanels();
     for( var i = 0 ; i < panels.length; i++ )
          if( panel == panels[i] )
               return i;
     return -1;
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
     return this.getPanelIndex(this.currentPanel);
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
     if (!panel)
          return null;
     return this.getElementChildren(panel)[0];
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
     if (!panel)
          return null;
     return this.getElementChildren(panel)[1];
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
     var children = [];
     var child = element.firstChild;
     while (child)
          if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
               children.push(child);
          child = child.nextSibling;
     return children;
Spry.Widget.Accordion.prototype.focus = function()
     if (this.element && this.element.focus)
          this.element.focus();
Spry.Widget.Accordion.prototype.blur = function()
     if (this.element && this.element.blur)
          this.element.blur();
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
     this.timer = null;
     this.interval = 0;
     this.fps = 60;
     this.duration = 500;
     this.startTime = 0;
     this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;
     this.onComplete = null;
     this.panel = panel;
     this.panelToOpen = accordion.getElement(panel);
     this.panelData = [];
     this.useFixedPanelHeights = accordion.useFixedPanelHeights;
     Spry.Widget.Accordion.setOptions(this, opts, true);
     this.interval = Math.floor(1000 / this.fps);
     // Set up the array of panels we want to animate.
     var panels = accordion.getPanels();
     for (var i = 0; i < panels.length; i++)
          var p = panels[i];
          var c = accordion.getPanelContent(p);
          if (c)
               var h = c.offsetHeight;
               if (h == undefined)
                    h = 0;
               if (p == panel && h == 0)
                    c.style.display = "block";
               if (p == panel || h > 0)
                    var obj = new Object;
                    obj.panel = p;
                    obj.content = c;
                    obj.fromHeight = h;
                    obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
                    obj.distance = obj.toHeight - obj.fromHeight;
                    obj.overflow = c.style.overflow;
                    this.panelData.push(obj);
                    c.style.overflow = "hidden";
                    c.style.height = h + "px";
Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
     var self = this;
     this.startTime = (new Date).getTime();
     this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
     if (this.timer)
          clearTimeout(this.timer);
          // If we're killing the timer, restore the overflow
          // properties on the panels we were animating!
          for (i = 0; i < this.panelData.length; i++)
               obj = this.panelData[i];
               obj.content.style.overflow = obj.overflow;
     this.timer = null;
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
     var curTime = (new Date).getTime();
     var elapsedTime = curTime - this.startTime;
     var i, obj;
     if (elapsedTime >= this.duration)
          for (i = 0; i < this.panelData.length; i++)
               obj = this.panelData[i];
               if (obj.panel != this.panel)
                    obj.content.style.display = "none";
                    obj.content.style.height = "0px";
               obj.content.style.overflow = obj.overflow;
               obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
          if (this.onComplete)
               this.onComplete();
          return;
     for (i = 0; i < this.panelData.length; i++)
          obj = this.panelData[i];
          var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
          obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
     var self = this;
     this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Best regards
Carla Leliveld
CL art & design              06-22405304
Cabernetlaan 19           [email protected]
6213 GR Maastricht     www.clartdesign.nl

Accordion Spry panel sizes

CS3 Accordion spry (can't see version in html) and I want to
make 1 of the panels a different size that the others. I have
already used the useFixedPanelHeights: false, defaultPanel: -1, so
they all close. I have text in the first panel and want to set the
height just to fit the size?

Hi,
to find out which Spry version do you have, open the
SpryAccordion.css file or the SpryAccordion.js file and look at the
beginning of these files. You should see there the Spry pre-release
version.
You probably have Spry 1.4 because this behavior works only
on spry 1.5.
An working sample you can find
here.
Diana

All panels open in Accordion

Hello there fellow Spryers,
I'm trying to use the Accordion widget. I'm building its divs
dynamically and they display fine in Firefox. But when i switch to
IE6 , all panels are open and it doesnt work correctly. I have
placed the accordion widget inside a td from a table.
Is there a solution to this problem? If anyone needs the code
i can provide it.
Thanks in advance,
Kostas Lagos

"PorcupineRabbit" <[email protected]> wrote
in message
news:f1cmum$ghg$[email protected]..
> I just found a temporary solution to this. Accordion
widget doesnt seem to
> like the xml definition, on the top of the
document..when i remove the
> <?xml
> version="1.0" ?> declaration everything works
fine..Is there a way to
> compromise this?
Looks like your browser went into QuirksRenderingMode. See
here for more
details:
http://css-discuss.incutio.com/?page=RenderingMode
Hope it would help
Massimo Foti, web-programmer for hire
Tools for ColdFusion and Dreamweaver developers:
http://www.massimocorner.com

Accordion spry

Is there a way to make it so that when you go to the accordion spry, all the tabs are closed initally. Currently, when I go to the accordion spry, the first tab is open and all the rest are closed.

@Sudarshan,
On a sidenote, Spry has been deprecated and is no longer officially supported or actively developed by Adobe
Isn't it a sad situation? The current version of DW is CS6. This version supports Spry. It has been purchased - and is still being purchased - in good faith. It is not until a DW user is confronted with a Spry problem, that he/she finds out that Spry is no longer supported.
Compare that with buying a new car and, as you drive out of the showroom, being told that the warranty has run out by saying "we do not support this model anymore".
Something is very wrong here.

Spry Repeat Accordeon Panels

This code here repeats the accordeons panel but all opened
and innactive.
<!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=iso-8859-1" />
<title>Products Demo</title>
<link href="css/accordion.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="../../includes/xpath.js"></script>
<script type="text/javascript"
src="../../includes/SpryData.js"></script>
<script type="text/javascript"
src="../includes/SpryEffects.js"></script>
<script type="text/javascript"
src="../includes/SpryAccordion.js"></script>
<script type="text/javascript"
src="../../includes/gallery.js"></script>
<script type="text/javascript">
var dsProducts = new Spry.Data.XMLDataSet("products.xml",
"products/product")
var dsProductFeatures = new
Spry.Data.XMLDataSet("products.xml",
"products/product/features/feature")
</script>
<link href="../css/screen.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="wrap">
<div id="sidebar">
<table spryregion="dsProductFeatures" id="products">
<caption>
{@Departure}
</caption>
</table>
<div spryregion="dsProductFeatures" id="content">
tetette
<p>
<img src="
http://staticcontent.exitravel.com/StaticContent/EN/DBImages/Common/Image/Hotel/{@OrgID}/{ @HotelID}_1.jpg"
id="mainImage" alt="main image" width="120" height="120" />
</div>
<div id="Acc1" class="Accordion">
<div spryregion="dsProductFeatures"
class="AccordionPanel">
<div spryrepeat="dsProductFeatures">
<div class="AccordionPanelLabel">
{@Destination}
</div>
<div class="AccordionPanelContent">
{@Price}
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Does that mean that Spry accordeons cant be duplicated that
way?

Actually, you can generate the panels dynamically, but there
are a couple of things you have to keep in mind. There is an
expected markup structure for the accordion. The divs that make up
the accordion follow a pattern that looks like this:
Accordion
Accordion Panel
Accordion Panel Label
Accordion Panel Content
Accordion Panel
Accordion Panel Label
Accordion Panel Content
Inserting extra divs between and around some of these
structures will only confuse the Accordion behavior code.
Since you are trying to repeat accordion panels, you want to
put the spryregion attribute on the Accordion itself, and then put
a spryrepeat on the actual div that is the panel.
The next thing to consider, is that anytime Spry regenerates
the markup for a widget, you have to re-attach all of the widget
behaviors to the widget. To accomplish this, we have to place a
listener on the data set. The idea is that every time the data set
notifies listeners that its data has changed, we know the widget
markup will be re-generated, so we have to call the constructor for
the Accordion.
Here's some actual markup that I whipped up that works:
<!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=iso-8859-1" />
<title>Dynamic Accordion</title>
<link href="../../css/accordion.css" rel="stylesheet"
type="text/css" />
<script language="JavaScript" type="text/javascript"
src="../../includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript"
src="../../includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript"
src="../../includes/SpryEffects.js"></script>
<script language="JavaScript" type="text/javascript"
src="../../includes/SpryAccordion.js"></script>
<script language="JavaScript" type="text/javascript">
// Step 1: Define the data set:
var dsAirports = new
Spry.Data.XMLDataSet("../../data/airports.xml",
"/airports/airport");
// Step 2: Register a listener on dsAirports so that we can
auto-attach the
// Accordion behaviors.
dsAirports.addDataChangedObserver("accordionObserver", {
onDataChanged: function(ds, dcType) { setTimeout(function() { var
acc = new Spry.Widget.Accordion("Acc1"); }, 0); } });
</script>
</head>
<body>
<div id="Acc1" class="Accordion"
spry:region="dsAirports">
<div class="AccordionPanel" spry:repeat="dsAirports">
<div class="AccordionPanelLabel">
<h3>{code}</h3>
</div>
<div class="AccordionPanelContent">
<div>{name}</div>
</div>
</div>
</div>
</body>
</html>
Note the use of a timer in the listener callback. This is
necessary to force the Accordion call to be triggered *after* the
dynamic region has been re-generated. This won't be necessary once
we implement the dynamic region observers mechanism.
--== Kin ==--

Embed and Accordion in a Tab Panel

Has anyone tried embedding an accordion widget inside a
tabbed panel? I'm running into an issue where the accordion doesn't
behave properly. I'm assuming it has something to do with the
hierarchy of div tags, but don't know enough yet to be certain. Can
anyone assist?
Michael

Hi Michael,
We have a known bug where accordions in a non-default tabbed
panel (initially hidden) doesn't work because it fails to
dynamically calculate its height due to the fact that it is
display:none.
I'll look into fixing it.
--== Kin ==--

Close accordion spry when clicked

Hello all..
I have visited:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
for help on how to close an accordion spry when it is
clicked. However, I don't want to have to have a link that says
close. Can anyone help with the javascript? (What goes where) I'm
new to javascript and any help would be appreciated. Thanks!

Hello all..
I have visited:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
for help on how to close an accordion spry when it is
clicked. However, I don't want to have to have a link that says
close. Can anyone help with the javascript? (What goes where) I'm
new to javascript and any help would be appreciated. Thanks!

Accordion Spry default all panels closed

Similar Messages

Maybe you are looking for