Make all Tabs on Spry Accordion display 'closed'

I used Dreamweaver CS5 to add a Spry Accordian widget to my page. I would like all tabs to display 'closed' when the page is first opened. I am new to web work, and don't know where or how to change the code to do this. Help?!

Okay. I found it.
At the bottom of the code for my page I found:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Product_Line");
</script>
I changed it to:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Product_Line", { useFixedPanelHeights: false, *defaultPanel: -1* });
</script>
When I saved that change and then previewed it, instead of all the Tabs starting out CLOSED - ALL the Tabs displayed OPEN!!
What did I do wrong?

Similar Messages

How do I close all tabs at one time without closing Firefox completely?

How do I close all tabs at one time without closing Firefox completely?

Open a new window. Go to the other window with all the tab. Close it. You now only have that newly open window.
Hub

Spry Accordion Display Issue

Hi guys
I have tried to implement a Spry Accordion function using DW CS3 to allow me to display current and previous news on a website, however I am having issues with getting it to display properly. You can view the page here: http://www.amiante.co.uk/news.html
When testing the site in various browsers I noticed a glaring issue, underneath the According there is a massive white space, which to me appears to be the space that would be taken up if each panel of the according were to be opened at the same time....
This issue occurs in Firefox 3.5.3, Safari 4.0.3, Opera 10.0 and Google Chrome 3.0.195. It seems to work faultlessly in IE 8, IE 7 and IE 6.
The confusing aspect is that if you zoom in (ctrl +) and zoom out (ctrl -) it seems to remove the white spacing.
If anyone has any idea of what is causing this I would be delighted to hear from you!
Thanks in advance.
Mackenzie

Thank you so very much, I appreciate the quick response. However, I still have one small issue. For some unknown reason the bluestar tab does not show the star. It shows the tab, but no star. I've got it labeled correctly and it's pointing to the correct files, but I get the blue by itself. I know it must be a very simple solution and I must be doing something incorrect.
the files are under:
images/accordion/accordion_tabs_bluestar.jpg, and accordion_tabs_redwhite.jpg. The redwhite shows up. This is driving me nuts! I even went back and re-did the image file and saved it again, but all I get is the blue without the star. Can it be that the image is too big and cutting off the star that is to the right of it?
Thank you so much, I do greatly appreciate your kind help.
the other one is
The code was copied and pasted exactly as was suggested. There is no other blue tab file on the server, so I am confused just a bit.
Thanks again for helping an newbie, I appreciate it.

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

Dreamweaver template Spry Accordion displays error on Firefox

Hi,
I downloaded and try to use the template 02 with Dreamweaver CS5 from
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
However, when I try to browse the theme_02_design.html in firebox, the spry accordion is corrupted ( see image) ,
it didn't displays as the way it looks in here: http://www.adobe.com/devnet-archive/dreamweaver/articles/dreamweaver_custom_templates/temp late2/Publish/theme_02_design_from_template.html
I already finished the whole editing to create a new site and it works perfectly fine in google chrome and IE.
I only browse the theme_02_design.html in firebox and it doesn't look right already.
Or is this template doesn't work well with firefox? How should I fix this problem?
Thanks a million for any help, appreciate it.

#1 Validate code with the tools below and fix reported errors.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
#2 Upload your test page and dependant files to a web server space you control.
#3 Come back to the forum & post the URL to your page.
Nancy O.

Help me control Spry Tabs or Spry Accordion width

I am using Spry Tabs and Spry Accordions in Liquid pages, inside a DIV with ID.
I use an external CSS stytle sheet to control this ID and properly position the Spry Tabs or Spry Accordions inside the page.
I would like to have these Tabs or Accordions panels filling the page with a 10px margin on both sides.
I tried many CSS properties to have the DIV ID position the panel with both 10px margins...
If I use a 100% width, the panel overshoots the width of the page by about 10 to 20 pixels.
Using a 0px position and a 10px border on the right does not work.
The only solution I found is using a 98% width (box and position), but it varies on larger screens...
I am using Dreamweaver CS 5.5 on a Mac Pro.
There must be some CSS trick that I don't know... But CSS should also be easier to use...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    padding: 0
    margin: 0
html {
    background: #CCC;
    height: 100%;
body {
    width: 960px;
    margin: auto;
    background: #FFF;
    height: 100%;
.aside {
    width: 260px;
    float: left;
    background: #030;
    padding: 10px;
.main {
    background: #6F3;
    padding: 10px;
    margin-left: 280px;
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
</head>
<body>
<div class="aside">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
      <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">Content 1</div>
      <div class="TabbedPanelsContent">Content 2</div>
    </div>
</div>
</div>
<div class="main">
<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>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryAccordion.js"></script>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Gramps
PS Sorry, horible colours

Spry Accordion browser issue

When I preview my page in browser, there is a dotted line all
around the spry accordion widget. I've looked through the css and
can't find where that is. Any idea how to eliminate this?

Malinki8 wrote:
> When I preview my page in browser, there is a dotted
line all around the spry accordion widget. I've looked through the
css and can't find where that is. Any idea how to eliminate this?
I believe what you're talking about can be fixed by adding
the following line to the .Accordion selector in the
SpryAccordion.css file:
outline:none;
FWIW, you should Spry questions over in the Spry forum as
there are more folks with Spry experience that hang out there:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

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

Spry Accordion closed tabs by default

Hi, I have some issues with my spry accordion widget. I'd like to have all my tabs closed by default by using this code:
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("linklist", { defaultPanel: -1} );
</script>
and seems that this doesn't work. All my tabs are closed thats true, but, when I click on them, they doesn't open at all. When I change it to "defaultPanel: 0" the widget works fine, but the first tab is opened as the code says.

You are addressing Accordion1, but not showing that id in the variable construction. Here is a similar implementation where all the panels begin closed:
<script type="text/javascript">

</script>
Usually, in the default Accordion Widget, the id of the Accordion is also used for the variable that constructs the widget. Note that I have also inserted the 'useFixedPanelHeights: false attribute:value pair.
Beth

SPRY accordion and tabs not displaying in IE6

Hi everyone:
Even after clearing up some validation errors in my HTML, I
am experiencing issues with a SPRY accordion and another page with
a Tabbed SPRY widget not appearing in IE6. The pages all work fine
in IE7, Firefox and Safari. I would greatly appreciate anyone
taking a look (link below) and letting me know if you see any
errors or know of a bug I have not found the fix for. My CSS
validates 100% so I don't think I have made any style sheet errors.
Thanks very much.
www.ducksroofing.com
K.

Hi all:
After some more tinkering, I have discovered the real issue
is that my containing element is not containing the entire page and
therefore cutting off my SPRY elements on the pages which have
them. This is causing the SPRY widgets to fall apart and, of
course, for the page to only scroll partially down.
Does anyone have a suggestion as to why the SPRY tabbed
element and accordion element on my pages is not nesting within
document flow and remaining with the containing div? I appreciate
your help.
Once again, url is: www.ducksroofing.com
K.

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/

Make a component invisible after all tabs in a tabbed pane are closed

Hi,
I am using a tabbed pane and open images in tabs. I want to disable a comonent after i find all the tabs of the tabbed pane closed and when all the tabs are closed the tab pane should also be closed.
Please help me.

    TabPane tabPane = new TabPane();
    tabPane.getTabs().addListener(new ListChangeListener<Tab>() {
      @Override
      public void onChanged(
          javafx.collections.ListChangeListener.Change<? extends Tab> c) {
        if (tabPane.getTabs().isEmpty()) {
         // whatever you need here:
         // somePane.getChildren().remove(tabPane);
         // someControl.setDisable(true);
    });

Can I set my accordion widget to "expand all" tabs?

I am using an accordion widget to display content on my web page. Is there a way to allow the user to "expand all" of the accordion tabs at once?

One way you can achieve this is by creating single panel accordion files, just copy the file down for each section, make sure to set the accordion setting to "Can close all".
See attached screen shot when published.... the panels are all closed, but you can open all to view.

Spry Accordion Menu Tab Link css - totally confused

Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Photo Gallery</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="PhotoGallery.html">Gallery 1</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Unit Newsletters</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="Newsletter.html">February 2010</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Forms</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="">Joining Instructions</a></li>
    <li><a href="">Enrolment</a></li>
    <li><a href="">Next of Kin</a></li>
    <li><a href="">Volunteer Blue Card</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="WhatsOn.html">Whats On</a></li>
    <li><a href="PSG.html">Parent Support Group</a></li>
    </ul>
    </div>
    </div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;

Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;

Make all Tabs on Spry Accordion display 'closed'

Similar Messages

Maybe you are looking for