Spry Accordion first tab

Hi, I am working on a Spry Accordion and I was wondering if it was possible to select which tab would be open when the website loads?

var acc1 = new Spry.Widget.Accordion("Acc1", { defaultPanel: -1 });

Similar Messages

.js update of spry accordion panel tab data for countdown functionality

Hi,
First off I must say I really love the work done on CS3 and
the Spry Framework - loads of examples and nicely implemented!
Questions in a nutshell:
Can I change spry generated data on the fly so I can run a
.js counter function to dynamically update accordion panel data?
What event do I look for to fire a .js init function to see my new
spry widget (onPostLoad isn't working for me, but I'm a newbie!)?
* spry accordion
* {expire} dataset data is SQL DATETIME
* js countdown function CD_Init() searches DOM for specific
element IDs 'countdownN' and uses innerHTML to update counter at
specific interval
* observer onPostLoad seems to be calling CD_Init before
accordion DOM is loaded.
Verbose questions:
I am trying to tweek the output of a Spry Acoordion and
wanted to add a third party js counter to my accordion panel tab
and am having a bit of difficulty. The js code uses an innerHTML
statement to keep the counter going and supports multiple counters
(which I need to use one counter per tab). I build the multiple
counter id from the ds_RowID field which is where the parent div
element where the js changes the innerHTML. Can I do this? The .js
searches for elements w/ an ID of "countdownN", N = instance # and
a date format of '2007-09-08 00:00:00 GMT+00:00' and updates the
div's text with the countdown time. My {expire} record below is an
SQL DATETIME which is the correct format for this countdown.js
function (with the GMT-05:00 appended).
The relavant code is:
<div id="specialDisplay" spry:region="dsSpecials">
<h3>Click on a special below from our <em>LIVE
FEED</em> to see all the up-to-the-moment
exciting packages available!</h3>
<div id="AccordionSpecials" class="Accordion">
<div class="AccordionPanel" spry:repeat="dsSpecials">
<div class="AccordionPanelTab"
onclick="dsSpecials.setCurrentRowNumber('{dsSpecials::ds_RowID}')"
spry:hover="AccordionPanelLabelHover"><?php echo '<div
id="countdown' .'{ds_RowID}'. '">';?>{expire}
GMT-05:00</div>{dsSpecials::name}</div> 
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="./i/ajax-loader.gif"/></div> 
<div spry:state="error"><span spry:content="Error
loading data..."></span></div> 
<div id="details" spry:state="ready"
spry:content="{detail}"></div> 
</div> 
</div> 
<script type="text/javascript">

</script>
</div> 
</div> 
I got the nice countdown.js script from
http://andrewu.co.uk/clj/countdown/
which allows N # of counters/page. I have updated this code to
start checking for a zero based index that I generate utilizing the
spry ds_RowID.
I have added an observer to run the countdown's
initialization function (to hopefully find all the "countdownN"
element instances) under my dataset declarations:
var observer = { onPostUpdate: function(notifier, data) {
CD_Init() ; } };
Spry.Data.Region.addObserver("AccordionSpecials", observer);
Also tried to add the observer to a div surrounding the
according w/ the "spry:region" specified.
But, alas, I see the correct expire instance in my tab, but
it looks like the counter is only firing before the actual data is
loaded (i.e. I used FF's webdeveloper and set a break on the
CD_Init function and it's breaking before the actual accordion is
there - I see the dataset placeholders in my window for the
accordion. When I continue, the accordion is generated, but my
countdown isn't working because it looks to be firing before the
DOM is updated w/ the accordion elements.
Sorry for the long speil; I'm really a .js neophyte and just
starting w/ spry - so I'm not even sure if I can/should change the
HTML generated from spry. If not, is there anyway that I can have a
countdown timer for each accordion's tab panel's associated
{expire} data field? Any ideas and suggestions are greatly
appreciated!!
Thank you also for this forum - some great gems for
development here!

Sorry - the previous post is way too long.
Is it possible to tie in a javascript update function (a
counter update) to an element generated by a spry widget (a dataset
value that generates spry accordion tab text) so that the accordion
tab gets updated by the javascript function running under a
setinterval?
I've tried firing the javascript init function with an
observer on the accordion's onPostUpdate event, but it's getting
fired before the spry data is loaded. Is this something that's
possible? Sorry for my lack of javascript expertise! Relying on the
real experts here!
Thanks for any advice/pointers.

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

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.

Accordion defaultPanel first tab value

I have an application which has an accordion panel and
several detailregions.
- the accordian panel is dynamically generated in spry with
xml (both the tabs and the content)
- the detailregions are based on what the current selected
tab is in the accordion panel
I needed to be able to access these tabs via a URL query
string - and have the correct panel / detailregion display based on
the variable passed in the URL.
I have this working correctly.
The problem though, is that the tabs onClick events do not
number correctly when using the defaultPanel attribute.
For example,
var acc = new Spry.Widget.Accordion("test",{defaultPanel:
functionThatGeneratesDefaultPanel});
works correctly for setting the panel which needs to be
displayed, but then if you click on the tabs to navigate to a
different panel, tab one ALWAYS defaults to whatever the
defaultPanel value was instead of being 0. Obviously this disables
the accordion panel from working correctly.
Any suggestions on how I can get around this?
Your assistance is appreciated!
elaine

Thanks for the reply Chris. I have somewhat narrowed down the
problem, but still haven't solved it (had to move on and finish the
rest of the website:)
As I mentioned previously, I am creating these accordion
panels dynamically through xml. Inside one of the panels, there is
a secondary navigation system which is fed by xml as well. The
problem seems to be caused by having two datasets in the same
accordion panel. Here is the code:
var observer = { onPostUpdate: function(notifier, data) { var
acc = new Spry.Widget.Accordion("nav",{defaultPanel:
requestedPanel}); dsNavItems.setCurrentRow(requestedPanel);
displayCoupons(); } };
Spry.Data.Region.addObserver("nav", observer);
and the accordion:
<div id="nav" class="Accordion" spry:region="dsNavItems
dsNavSubs">
<div class="AccordionPanel" spry:repeat="dsNavItems">
<div class="AccordionPanelTab" spry:hover="rowHover"
spry:select="rowSelected"
onclick="clicker({dsNavItems::ds_RowID});">
<h3 spry:if="({ds_RowNumber}) != 2"
onClick="dsNavItems.setCurrentRow('{dsNavItems::ds_RowID}');hideLayer('comingSoon');hideL ayer('coupons');hideLayer('couponLarge');hideLayer('imageHolderScreen');hideLayer('submenu Content');hideLayer('submenu1');showLayer('featureGraphic');showLayer('ticker');showLayer( 'newsBar');"
spry:content="{dsNavItems::name}"></h3>

<h3 spry:if="({ds_RowNumber}) == 2"
onClick="dsNavItems.setCurrentRow('{dsNavItems::ds_RowID}');hideLayer('comingSoon');hideL ayer('imageHolderScreen');hideLayer('submenuContent');hideLayer('submenu1');hideLayer('fea tureGraphic');hideLayer('ticker');hideLayer('newsBar');showLayer('coupons');showLayer('cou ponLarge');"
spry:content="{dsNavItems::name}"></h3>
</div>
<div class="AccordionPanelContent">
<div spry:state="loading"><img
src="images/ajax-loader.gif"/></div>
<div spry:state="error"><span spry:content="The
website is currently down. Please try again in a few
minutes."></span></div>

<div spry:if="({ds_RowNumber}) == 0"
spry:state="ready">
<div class="department" spry:repeat="dsNavSubs"
onClick="{dsNavSubs::onClick}; goToURL('{dsNavSubs::url}')"
spry:hover="rowHover" spry:select="rowSelected"
spry:content="{dsNavSubs::name}"></div>
</div>

<div spry:if="({ds_RowNumber}) != 0"
spry:state="ready">
<span
spry:content="{dsNavItems::content}"></span>
</div>
</div>
</div>
</div>
This problem can be seen at
http://www.sportzoutdoor.com/index.php?panel=2
This will default to opening the page with the second tab
appearing. Trying clicking on the first tab and you will see that
it tries to refresh, but comes up as the 2nd tab. When running an
echo with this, on the rownumber, it returns as 2 for both the
selected tab and for the first tab. For some reason, it is
assigning 2 to this tab when it generates it.
The problem only occurs when it is selecting a specific panel
from the url query. Otherwise at
http://www.sportzoutdoor.com/index.php
it works fine. Also, this is the page where you can view the
secondary nav system built into the first panel.
Also, in another example - this one without a secondary nav
system, but still with the url query, works fine:
http://www.sportzoutdoor.com/cycling.php?panel=4
Let me know what you think...
thanks,
elaine

Spry Data in Accordion in Tabs

Hi
I have been able to get xml spry data to work in an accordion and I have been able to get an accordion to work in tabs but I cannot get the data to work in an accordion that is in a tab -- the accordion panels do not collapse. I have a sample testing site at http://testing.bellamys.org that has two tabs -- the first tab has spry data in an accordion but the panels do not collapse. The second tab shows an accordion working properly but uses hard coded data.
I have a database that will export xml files for courses for different grades. I would like to have all the courses for a grade displayed in a panel and have each grade set in a tab. Any help would be greatly appreciated .

Hi Ronald,
Place the constructor withing the Spry region as follows
      <div spry:region="dsGrade5" >
          <div id="Accordion1" class="Accordion" tabindex="0">
            <div spry:repeat="dsGrade5" class="AccordionPanel">
            <div class="AccordionPanelTab">{@name}</div>
            <div class="AccordionPanelContent">{summary}</div>
          </div>
          <script>
               var Accordion1 = new Spry.Widget.Accordion("Accordion1");
          </script>
        </div>
      </div>
I hope this helps.
Ben

Accordion Issue with IE7/XP: First tab is initially opened. Should be closed

I'm almost finished my navigation menu for a client and everything is looking good. Except in IE7, of course. In IE7, the first tab is opened a little and I'd like it to be closed completely. How do I solve this or is this just a Spry bug?
http://www.tendergreensfood.com/wp-content/themes/greens/test.html

Make the default panel -1 in the constructor (panel number -1, of course, does not exist, so no panel will be open at first):
<script type="text/javascript">
var acc8 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: -1 });
</script>
Lovely site, by the way...
Beth

Spry Accordion - Tabs open and then close after page loads

I am using a Spry Accordion menu driven from a database.
The menu opens up during the page load and then closes.
I'm using SpryAccordion.js 1.6.1
And to open a preset tab, I'm using:
<script type="text/javascript">

</script>
But, all of the tabs open and then close on page load.
My page:   http://www.texashotjobs.us/00C01.aspx
Any fix for this??
Thanks, Ron

Well to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
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;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions

Opening first tab of jquery accordion when page loads

Hello, I am wondering how I would make the first tab of my accordion to open when the page loads. It is a custom accordion and therefore it is hard to find the answer online.
I want this to be specific to a certain page if possible rather than universal across the site.
Here is the HTML:
<div id="st-accordion" class="st-accordion">
                    <ul>
                        <li>
                            <a href="#">Lorem ipsum<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat auctor ante, sodales pretium felis auctor in. Aenean tempor, orci vel vestibulum lobortis, justo augue laoreet turpis, id consectetur dolor arcu sed arcu. Sed id dolor tellus. Nulla eros risus, sollicitudin in ultricies ac, tincidunt et nisl. Nam ac consectetur est. Morbi pretium libero in lacus semper ultricies. Vestibulum in nibh a ligula malesuada posuere ac vel lorem. Duis varius scelerisque vehicula. Maecenas convallis tellus in tellus facilisis eget sollicitudin est lacinia. Ut quam tortor, pretium non lacinia sit amet, iaculis ac ipsum. Donec quis libero accumsan felis fringilla pulvinar eget in leo.</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">Lorem ipsum<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat auctor ante, sodales pretium felis auctor in. Aenean tempor, orci vel vestibulum lobortis, justo augue laoreet turpis, id consectetur dolor arcu sed arcu. Sed id dolor tellus. Nulla eros risus, sollicitudin in ultricies ac, tincidunt et nisl. Nam ac consectetur est. Morbi pretium libero in lacus semper ultricies. Vestibulum in nibh a ligula malesuada posuere ac vel lorem. Duis varius scelerisque vehicula. Maecenas convallis tellus in tellus facilisis eget sollicitudin est lacinia. Ut quam tortor, pretium non lacinia sit amet, iaculis ac ipsum. Donec quis libero accumsan felis fringilla pulvinar eget in leo </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                                        $('#st-accordion').accordion({
                                                  oneOpenedItem          : true
        </script>
                    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.accordion.js"></script>
            </div>
And the CSS:
.st-accordion{
    width:100%;
    min-width:270px;
    margin: 0 auto;
}.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
.st-accordion ul li:first-child{
    border-top:none;
.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 22px;
    display: block;
    position: relative;
    line-height: 100px;
    outline:none;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
.st-accordion ul li > a:hover{
    color: #1693eb;
.st-accordion ul li > a span{
    background: transparent url(../images/down.png) no-repeat center center;
    text-indent:-9000px;
    width: 26px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: -26px;
    margin-top: -7px;
    opacity:0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
.st-accordion ul li > a:hover span{
    opacity:1;
    right: 10px;
.st-accordion ul li.st-open > a{
    color: #1693eb;
.st-accordion ul li.st-open > a span{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);
    right:10px;
    opacity:1;
.st-content{
    padding: 5px 0px 30px 0px;
.st-content p{
    font-size: 16px;
    font-family: Georgia, serif;
    font-style: italic;
    line-height: 28px;
    padding: 0px 4px 15px 4px;
.st-content img{
    width:125px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
@media screen and (max-width: 320px){
    .st-accordion ul li > a{
        font-size:14px;
@media screen and (max-width: 800px){
    .st-accordion ul li > a{
        font-size:16px;
You can find the page at http://bit.ly/Zrpt1s
Any help is grately appreciated thanks!

Try
$(function() {
    $('#st-accordion').accordion({
        oneOpenedItem    : true,
       open: 0

Spry Accordion Widget | Different Rollover Colour On Each Tab

Hi... I hope someone out there can help me.
I've used the Spry Accordion function to create collapsible panels. Presently, each tab is white. I can get the background colour to change on rollover, but ideally wanting each tab to display a different colour.
I recognise that this will require some CSS, but unsure of how to set this up.
Example, tab one would be:
.AccordionPanelTab {
background-color: #CCCCCC;
border-top: solid 1px black;
border-bottom: solid 1px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
.AccordionPanelTabHover {
color: #555555;
How can I easily incorporate the different rollover colours for the each tab (2, 3, 4 etc.) without having multiple css and js files? Needs to work in IE8!
Thanks in advance.

If you want to follow what I am going to say, please create a new document with a SpryAccordion as the only bit of code. Then view the document in SPLIT and LIVE and LIVE CODE as in
Now HOVER over the labels, do not click and see what happens to the markup. Hovering over the labels will add a class of AccordionPanelTabHover to the respective element. Also notice the classes of AccordionPanelOpen and AccordionPanelClosed. See below
What the original code does not have is a way to identify or target individual tabs. In your example you have done that by changing AccordionPanelTab to AccordionPanelTab1 etc. Personally I would not do that. I would keep the original classes in tact and add a unique class like Tab1 etc. That way we will not touch the original CSS, adding our own overriding style rules.
If you look at the following code we have done exactly that. Notice the lack of a space between some of the selectors, this is because they are contained within the one element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<style>
.AccordionPanelOpen .AccordionPanelTab {
    color: #FFF;
.AccordionPanelOpen .AccordionPanelTab.Tab1, .AccordionPanelOpen .AccordionPanelTab.Tab1.AccordionTabHover {
    background-color: #900;
.AccordionPanelOpen .AccordionPanelTab.Tab2, .AccordionPanelOpen .AccordionPanelTab.Tab2.AccordionTabHover {
    background-color: #960;
</style>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab Tab1">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab Tab2">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
If you paste the above code into a new document and view it as described above, have a look at where the classes appear as you hover over the elements.

Spry accordion has extra phantom tabs

In this template, I added extra tabs to the left hand navigation by just copying and pasting the code for the original tabs.
Then I noticed there were extra tabs in the accordion also, which don't work.
Looking at the code, I see that the navigation tabs seem to reside within the spry asset code . . . did I foul up the accordion by adding extra navigation tabs to the left hand column?
Here's the page: http://asptfacultycaucus.info/
I'm looking at the code but can't see anything that would cause these extra accordion tabs . . . (but I've also never used a spry asset accordion before)!
Help help,
Pamela

Thank you everyone for all of the suggestions. Just as an update, after posting a plea for help I found myself still wanting to work, so downloaded a fresh template (again, this is like the 4th time) and started from scratch. I went through each step I'd gone through to make corrections. Several times I recreated the same problems I'd encountered before that had to be resolved with other answers from questions I'd asked in the DW forums. Several times I created new problems, and actually had to delete a file and replace it with the same file from the original template and start over.
So right now, I do have my .css linked. I think what happened was: I wanted to test out a change I'd made to the template. I thought I would save it with a new name, so the original, still-functioning template would remain unchanged. When I saved it with a new name I was asked if I wished to update the links. I said "no," thinking all pages from the site based on the original template would otherwise be linked to this new one. What actually happened (I think) is that the new file was no longer linked to any of the stylesheets, accordion stylesheets, etc., so therefore there was no formatting at all.
I'm still suffering with how to make changes to the text of the spry accordion, and have experimented with various strategies for that as well. I've explained those and asked for help in another topic, which is: "changing text in spry accordion" -- I hope you all will help me with this one!
Here is the page as it stands so far: http://asptfacultycaucus.info/#
Thanks so much,
Pamela H

Spry Accordion Hover/Active Issue

I have designed a spry accordion widget for a FAQ page and within Dreamweaver CS6 it is fully functional. The color I've selected doesn't occur with a hover or an active tab once EVERYTHING is uploaded. Below is a live link to the problem page, my Spry CSS and layout CSS as well as a screenshot of the proper functionality occuring in Dreamweaver. Thoughts?
The problem page:
http://pauldhart.com/RideTTF_website/faq.html
Spry CSS
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
    overflow: hidden;
/* 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 {
    margin: 0px;
    padding: 0px;
/* 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.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
    border-top: solid 1px black;
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    background-image: url(/content-opaque.png);
    background-attachment: fixed;
    background-repeat: repeat;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    background-color: #300;
    font-size: 12px;
/* 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 {
    margin: 0px;
    padding: 2px;
    background-image: url(../infobkgd.png);
    background-attachment: fixed;
    background-repeat: repeat;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
    overflow: hidden;
    height: 40
[x;
    height: 100%;
/* 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: #000033;
/* 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 {
    color: #FFFFFF;
    background-color: #003;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #FFFFFF;
/* 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 {
    background-color: #003;
/* 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 {
    background-color: #000033;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
Layout CSS
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Donate Today!</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="_css/donatepage.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarDonate.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="header"><img src="RTTF-banner.jpg" alt="Ride to the Flags VI"></div>
<div id="navigation">
    <ul id="donatemenu" class="MenuBarHorizontal">
      <li><a href="profile.html">home</a>      </li>
      <li><a href="theride.html">the ride</a></li>
      <li><a href="donate.html">donate</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">gallery</a>
        <ul>
          <li><a href="photo-gallery.html">photo</a></li>
          <li><a href="video-gallery.html">video</a></li>
        </ul>
      </li>
      <li><a href="faq.html">FAQs</a></li>
      <li><a href="contact.html">contact</a></li>
    </ul>
</div>
<span class="AccordionPanel">
<div class="AccordionPanelTab"></div>
</span>
<div id="faq-content">
    <div id="faq-accordion" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Is this ride still going on?</div>
        <div class="AccordionPanelContent">A: Yes</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is the date for this year’s ride?</div>
        <div class="AccordionPanelContent">A: Saturday, September 7th.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What time does check-in/registration open?</div>
        <div class="AccordionPanelContent">A: Online registration will begin in May. Check-in at 8:00am on September 7th.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Where is check-in?</div>
        <div class="AccordionPanelContent">A: Check-in will be just south of PCH on Las Posas Rd (right before Gate 3 of the Naval Base).</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Will the route be the same?</div>
        <div class="AccordionPanelContent">A: We have changed the route this year few a few reasons. You can visit the route map to see.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: We’re not doing the ride but we would like to come out and watch the bikes as they drive by. What time will you be on our street?</div>
        <div class="AccordionPanelContent">A: Given our start at 10:30am, we will be reaching the following streets at these times:</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is the minimum amount to give to ride in this ride?</div>
        <div class="AccordionPanelContent">A: $35/rider $20/passenger</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What does that give me?</div>
        <div class="AccordionPanelContent">A: Patch, Food ticket, and drink ticket</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Why must we raise/give a minimum amount this year?</div>
        <div class="AccordionPanelContent">A: As you know, for the first five years, the Ride to the Flags ran on an any-donation-goes basis. However, as we got larger, the costs associated with putting the ride together grew immensely. The minimum donation allows for us to cover the costs for the ride. However, we try our best to bring on as many sponsors as possible to help cover our costs so that we can ensure that your donation is going to good use.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Can I give more money than the registration fee?</div>
        <div class="AccordionPanelContent">A: Of course. </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What if we raise a lot of money for the cause?</div>
        <div class="AccordionPanelContent">A: The White Heart Foundation is giving out some small prizes for our top donors.   Those will be announced at a later date.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: How will check-in be different now that there is pre-registration?</div>
        <div class="AccordionPanelContent">A: There will be a pre-registered check-in line and another line for those looking to just show up the day of.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What kinds of payments are accepted?</div>
        <div class="AccordionPanelContent">A: We prefer you use our online fundraising application Razoo.com that can be found on this website for your pre-registration. </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I ride a trike, can I participate?</div>
        <div class="AccordionPanelContent">A: Yes</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Are scooters allowed?</div>
        <div class="AccordionPanelContent">A: Eh, sure, why not?</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Will there be celebrities in attendance?</div>
        <div class="AccordionPanelContent">A: Probably. We usually do not know about their appearance ahead of time. </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Are you getting tired of all of my questions?</div>
        <div class="AccordionPanelContent">A: A little</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is happening on the base now that the Celebration of Freedom is at the end of the ride?</div>
        <div class="AccordionPanelContent">A: Memorial service and wreath laying and maybe a special guest.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Will there be live music at the Celebration of Freedom?</div>
        <div class="AccordionPanelContent">A: There will.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I don’t ride a motorcycle but can I still come to the Celebration of Freedom?</div>
        <div class="AccordionPanelContent">A: Yes.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is my cost?</div>
        <div class="AccordionPanelContent">A: General Public $40. Student $20. Bikers the day of $40.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: If I preregister for the ride and decide to just come to the Celebration of Freedom at the end of the ride, will I get my free patch, food ticket, and drink ticket?</div>
        <div class="AccordionPanelContent">A: No.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What are costs of food and drink tickets?</div>
        <div class="AccordionPanelContent">A: Food - $5, Drink - $2, Beer - $5</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: WAIT?! THERE’S GOING TO BE BEER?!!!!</div>
        <div class="AccordionPanelContent">A: Yes.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: That’s awesome. I love you.</div>
        <div class="AccordionPanelContent">A: Control yourself.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Will there be vendors during the Celebration of Freedom?!</div>
        <div class="AccordionPanelContent">A: Yes! For the first time ever, we give to you….motorcycle vendors.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I'm a vendor, how do I reserve a spot?</div>
        <div class="AccordionPanelContent">A: Click here and fill out our application. It’s a lot easier than taking the S.A.T.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Can I sponsor the Celebration of Freedom?</div>
        <div class="AccordionPanelContent">A: Certainly! Click here for our sponsorship packet.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Can my motorcycle club ride together?</div>
        <div class="AccordionPanelContent">A: If you come together, sign in together, and hold hands.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Are we doing big flags up front this year?</div>
        <div class="AccordionPanelContent">A: Yup</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Last year the riders got split up, how are you fixing that this year?</div>
        <div class="AccordionPanelContent">A: We’re filing certain permits and paying astronomical fees to shut down traffic for 30 minutes on a Saturday so that we don’t get split up.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Last year the ride ended up being really slow, will it be slow this year?</div>
        <div class="AccordionPanelContent">A: We admit it was slow. We know, we know. Now that we are closing the roads as we all move through, we’ll be allowed to pick up the pace a little. Also, the new route allows us go faster through town.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I'm a police officer but will be riding as a civilian. Can I bring my firearm on base?</div>
        <div class="AccordionPanelContent">A: The base will not allow that.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I want to create a donating team, where do I start?</div>
        <div class="AccordionPanelContent">Content 34</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: Can I start a donating team for my motorcycle group to cover all our registration costs?</div>
        <div class="AccordionPanelContent">A: Negatory. Every individual is his/her own team. </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: I don't have a motorcycle, can I still attend?</div>
        <div class="AccordionPanelContent">A: Yes, you can attend both the event at the Naval Base and the Celebration of Freedom in Malibu.</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Q: What is the WHF?</div>
        <div class="AccordionPanelContent">A: The White Heart Foundation was created to help support our community military, police, and fire.</div>
      </div>
    </div>
</div>
<div id="footer">This is the content for Layout Div Tag "footer"</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("donatemenu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("faq-accordion");
</script>
</body>
</html>
Screenshot of how it looks locally in Dreamweaver:

SpryAccordion.css
You have an error that is killing the rest of your code shown below in red. Remove it.
.AccordionPanelContent {
    margin: 0px;
    padding: 2px; /**suggest using 12px or more**/
    background-image: url(../infobkgd.png);
    background-attachment: fixed;
    background-repeat: repeat;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px; /**suggest using 16px or more**/
    color: #FFF;
    overflow: hidden;
    height: 40
[x;
    height: 100%;
Nancy O.

A simple Spry Accordion Question (I think)

Hi all:
I've searched but can't find, but I think this is a simple one.
I've created a basic Spry accordion menu with DW/CS3 - Insert/Spry/Spry Accordion. How do I get the first "Content 1" to be hidden/not visible upon page load. Right now, the "Lable 2" must be clicked to hide the "Content 1" which of course shows the "Content 2"? Guessing it's in the JS, but I'm not sure. TIA for any help. HTML and JS Code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
JAVASCRIPT
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.duration = 500;
    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);
    // Unfortunately in some browsers like Safari, the Stylesheets our
    // page depends on may not have been loaded at the time we are called.
    // This means we have to defer attaching our behaviors until after the
    // onload event fires, since some of our behaviors rely on dimensions
    // specified in the CSS.
    if (Spry.Widget.Accordion.onloadDidFire)
        this.attachBehaviors();
    else
        Spry.Widget.Accordion.loadQueue.push(this);
Spry.Widget.Accordion.onloadDidFire = false;
Spry.Widget.Accordion.loadQueue = [];
Spry.Widget.Accordion.addLoadListener = function(handler)
    if (typeof window.addEventListener != 'undefined')
        window.addEventListener('load', handler, false);
    else if (typeof document.addEventListener != 'undefined')
        document.addEventListener('load', handler, false);
    else if (typeof window.attachEvent != 'undefined')
        window.attachEvent('onload', handler);
Spry.Widget.Accordion.processLoadQueue = function(handler)
    Spry.Widget.Accordion.onloadDidFire = true;
    var q = Spry.Widget.Accordion.loadQueue;
    var qlen = q.length;
    for (var i = 0; i < qlen; i++)
        q[i].attachBehaviors();
Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
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(panel)
    if (panel)
        this.addClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
    if (panel)
        this.removeClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.openPanel = function(panel)
    var panelA = this.currentPanel;
    var panelB = panel;
    if (!panelB || panelA == panelB)
        return;
    var contentA;
    if( panelA )
        contentA = this.getPanelContent(panelA);
    var contentB = this.getPanelContent(panelB);
    if (! contentB)
        return;
    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 });
        this.animator.start();
    else
        if(contentA)
            contentA.style.height = "0px";
        contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
    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;
Spry.Widget.Accordion.prototype.openNextPanel = function()
    var panels = this.getPanels();
    var curPanelIndex = this.getCurrentPanelIndex();
    if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
        this.openPanel(panels[curPanelIndex+1]);
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
    var panels = this.getPanels();
    var curPanelIndex = this.getCurrentPanelIndex();
    if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
        this.openPanel(panels[curPanelIndex-1]);
Spry.Widget.Accordion.prototype.openFirstPanel = function()
    var panels = this.getPanels();
    if( panels )
        this.openPanel(panels[0]);
Spry.Widget.Accordion.prototype.openLastPanel = function()
    var panels = this.getPanels();
    if( panels )
        this.openPanel(panels[panels.length-1]);
Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
    // if (this.enableKeyboardNavigation)
    //     this.element.focus();
    if (panel != this.currentPanel)
        this.openPanel(panel);
    this.focus();
Spry.Widget.Accordion.prototype.onFocus = function(e)
    // this.element.focus();
    this.hasFocus = true;
    this.addClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.prototype.onBlur = function(e)
    // this.element.blur();
    this.hasFocus = false;
    this.removeClassName(this.element, this.focusedClass);
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.stopPropagation)
        e.stopPropagation();
    if (e.preventDefault)
        e.preventDefault();
    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.onPanelClick(panel); }, false);
        Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
        Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(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);
    else
        this.removeClassName(panel, this.openClass);
        this.addClassName(panel, this.closedClass);
        content.style.height = "0px";
    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);
    if (this.enableKeyboardNavigation)
        // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
        // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
        // by default.
        var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
        // if (!tabIndexAttr) this.element.tabindex = 0;
        if (tabIndexAttr)
            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.getCurrentPanelIndex = function()
    var panels = this.getPanels();
    for( var i = 0 ; i < panels.length; i++ )
        if( this.currentPanel == panels[i] )
            return i;
    return 0;
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.PanelAnimator = function(accordion, panel, opts)
    this.timer = null;
    this.interval = 0;
    this.stepCount = 0;
    this.fps = 0;
    this.steps = 10;
    this.duration = 500;
    this.onComplete = null;
    this.panel = panel;
    this.panelToOpen = accordion.getElement(panel);
    this.panelData = [];
    Spry.Widget.Accordion.setOptions(this, opts, true);
    // If caller specified speed in terms of frames per second,
    // convert them into steps.
    if (this.fps > 0)
        this.interval = Math.floor(1000 / this.fps);
        this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
    else if (this.steps > 0)
        this.interval = this.duration / this.steps;
    // 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)
                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.increment = (obj.toHeight - obj.fromHeight) / this.steps;
                obj.overflow = c.style.overflow;
                this.panelData.push(obj);
                c.style.overflow = "hidden";
                c.style.height = h + "px";
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
    var self = this;
    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!
        if (this.stepCount < this.steps)
            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()
    ++this.stepCount;
    this.animate();
    if (this.stepCount < this.steps)
        this.start();
    else if (this.onComplete)
        this.onComplete();
Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
    var i, obj;
    if (this.stepCount >= this.steps)
        for (i = 0; i < this.panelData.length; i++)
            obj = this.panelData[i];
            if (obj.panel != this.panel)
                obj.content.style.height = "0px";
            obj.content.style.overflow = obj.overflow;
            obj.content.style.height = obj.toHeight + "px";
    else
        for (i = 0; i < this.panelData.length; i++)
            obj = this.panelData[i];
            obj.fromHeight += obj.increment;
            obj.content.style.height = obj.fromHeight + "px";

On the bottom of yourpage you have this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
Change it to this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
Ken Ford

Spry Accordion Jerky/Jumping movement Issues in IE

I am having a difficult time trying to debug the accordion in IE. You can see the accordion here in IE I am having two issues.
1. When at the top of the site and clicking on a tab to open it jumps down the page as if it were an anchor point, and I find this very annoying.
2. The movement below the tab clicked is jumping around and this also is incredibly annoying to me, its more subtle than the above issue but it still bothers me. I am having this issue in GC as well.
I have searched quite a few forums and have not found a solution for this but this must be a fairly common issue? I am not that familaur with spry yet this is my first real project using it so my knowledge is very limited to this point. This dose work perfect in FF.
Thanks in advance,

I will put together a gutted version of this and send it over if you have the time that would be fantastic. Making a gutted version may be the best thing at this point so I can slowly add stuff back and see what causes the problem. If i cant fix it by doing that I will zip and send the files.
Date: Tue, 27 Oct 2009 15:23:40 -0600
From: [email protected]
To: [email protected]
Subject: Spry Accordion Jerky/Jumping movement Issues in IE
Can you provide me with files where I can reproduce your issue with
out any other scripts on the site? This gives me a better debugging
area. If you do not feel comfy with posting it online. You can e-mail
it to mailto:[email protected]
>

Spry Accordion first tab

Similar Messages

Maybe you are looking for