Spry Accordion shows scrollbars on initial load

This only happens in IE. Is there a way around this?
Whenever the accordion loads...it flashes the scrollbars briefly.
This client is not happy. I really don't want to re-work this in a different framework.
Ideas??

http://web.uvic.ca/akeller/pw401/howto/spry_accordion_kill_scrollbars_HT.html

Similar Messages

Spry Accordion how to open on load panels closed

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

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

Spry Accordion menu opens on page load then closes

Hello,
I'm having issues with a SPRY Accordion menu loading with all of the tabs open, then closing once the page finishes loading.
Example page is here:
http://thesparkmachine.com/mca2009/academics
(site is still being worked on, so forgive any oddities)
Is this something that is occurring because of the large amount of material loading on the page at once? The site is Joomla!-based, and there are close to a dozen modules on the page, plus an random background image script.
Any advice would be helpful.
Thanks!

I see you have also fixed your menu sections linking..
But i still wanted to give you some advice on why it opens and closes.
If you check out the source of your page, you will see that the constructor for your accordion is at the bottom of the page. When the browser loads the page, it parses from top to bottom, so it has parsed the accordion markup. But not yet the constructor for the accordion, so once it finally done with parsing the rest of the markup it finds the constructor and executes it.
What would have helpt, if you just moved the <script> with the constructor to directly under the accordion. So when the accordion markup has been parsed the brower directly executes the scripts.

Spry Accordion with custom scrollbar

I'm trying to find a Spry Accordion with a custom scrollbar.
There are other accordion scripts out there but I am most
comfortable working with the Spry script. I cant seem to find any
of these with a custom scrollbar. Can someone here help?

Mr. Andersson wrote:
> I'm trying to find a Spry Accordion with a custom
scrollbar. There are other
> accordion scripts out there but I am most comfortable
working with the Spry
> script. I cant seem to find any of these with a custom
scrollbar. Can someone
> here help?
Spry has no custom scroll bars. Currently Spry (as of 1.6.1)
doesn't have drag and drop which would be required for a custom
scroll bar. Best you might be able to do would be to try to style
the browser provided scroll bars, but that's not valid CSS, and I
know that Firefox doesn't show the styled scrollbars (IE does).
Take a look at this page in IE:
http://www.iconico.com/CSSScrollbar/
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

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

Animated splash does not show after initial load

I am trying to get an animated splash to show the form is loading. When I use an animated splash it shows as expected on the initial load but on subsequent loads of same form, it does not. Static splash shows every time. What can I do to get the animated splash to show every time a form is opened? Is it possible?
Edited by: user620240 on Mar 3, 2009 8:54 AM

Kami,
I'm facing the same problem.
Could you please provide a link to 'doc 376241.1'. I haven't been able to find it. Or maybe you could copy-paste the code in here?
Thanks in advance for this,
Abigail

DatePicker shows wrong value on initial loading

I have a column with a date picker, to make the content of the column editable.
oCdColumn = new sap.ui.table.Column({
            label: "Übergabe",
            template: new sap.ui.commons.DatePicker({
                value: {
                    path: "CD",
                    formatter: function (sDate) {
                        var date = new Date(parseInt(sDate));
                        console.log(date)
                        return date;
                locale: "de",
                change: [oController.onDateFieldChange, oController]
            sortProperty: "CD"
The value I get from the path CD is in the format you get when you call .getTime() on a Date.
On initial loading the datepicker displays some dates that are like 6 years after the date that should be displayed. When i navigate to another table page/ change the sort order and then navigate back/change the order to initial value the date is displayed correctly.
How is this possible?

Hi Frank,
as you can see I logged the Formatter Output. It never showed me an incorrect date. I think parseInt of null returns NaN. When NaN was the Output of theFormatter the DatePicker showed the current Date.
I stepped through and for the first 5 lines (which is the default value for a table page) it put a correct Date in the table, the other values i can't see because the table page was full, but the console showed a correct date. After it finished running through all the formatters the
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto
was triggered and the dates were wrong.
Thanks for the link with the type system. I tried it yesterday, but it gave me an undefined is not a function error. My mistake was that i just set the pattern and not the source pattern. When I set the source pattern to "timestamp" it worked. Thank you.
For anyone who runs in the same problem: i would also recommend this link: sap.ui.model.Date
Regards,
Judith

Spry Accordion open on page load

How do you stop the Spry Accordion from being open while the page is loading - as soon as the page loads the Accordion closes to the way it has been designed - it is just annoying!

Starting with All Panels Closed
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor option, and a -1 for the "defaultPanel" option.
Gramps

Horizontal Axis not showing when initial loading

Hi,
We are on Dashboard 4.1 SP3.
I have drilling down configured on the Dashboard report. The issue is when initial loading the dashboard. the horizontal text are not showing completly, untill I click the other column of the parent column, it shows the child horizontal text.
Could you please help.
Thanks,

Hi Dave,
There are some issues still in displaying the horizontal axis.
1844514 - Dashboard X axis labels are cutoff
As a workaround what you can do, use the range slider to make the date text to display vertically rather than horizontal or you can enlarge the size of the chart at the max to make them to display vertical.
Hope this helps!!!
--SumanT

Spry Slideshow Shows All While Loading

The Spry Slideshow I built shows all the slides at once while it is loading for the first time. Is there a way to quell this, as it makes the viewer a little queasy -- especially on slow-loading connections. I tried moving the "unobtrusive" javascript file to the end of the page, but that did nothing.
Suggestions?

Excellent suggestion!
First, here are the JS files that get linked in the head of the web page:
SprySlidingPanels.js
SpryDOMUtils.js
Second, here is the basic structure of the slideshow (someone else worked on the CSS, so I cannot vouch for it--though the same thing seems to happen in any slideshow I build, so I seriously doubt there is a CSS issue causing this.)
<div id="newsTicker">
<div id="ticker" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
            <div id="item1" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="next"><a href="#" id="link2">Next >></a></div>
            </div>
            <div id="item2" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link1">Prev <<</a></div>
                <div class="next"><a href="#" id="link3">Next >></a></div>
            </div>
            <div id="item3" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link2">Prev <<</a></div>
                <div class="next"><a href="#" id="link4">Next >></a></div>
            </div>
            <div id="item4" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link3">Prev <<</a></div>
                <div class="next"><a href="#" id="link5">Next >></a></div>
            </div>
            <div id="item5" class="SlidingPanelsContent">
                <img src="irrelevant.jpg" width="641" height="246" alt="doesn't matter" />
                <div class="prev"><a href="#" id="link4">Prev <<</a></div>
            </div>
</div>
</div>
    <div class="bottback">
        <p class="navLinks">
          <a href="#" id="link1">Link</a> |
          <a href="#" id="link2">Link</a> |
          <a href="#" id="link3">Link</a> |
          <a href="#" id="link4">Link</a> |
          <a href="#" id="link5">Link</a>
        </p>
    </div>
</div>
Lastly, here is the "unobtrusive" code:
//Declare the variable name outside the function so it is global.
var sp;
function InitPage()
sp = new Spry.Widget.SlidingPanels("ticker");
Spry.$$("#link1").addEventListener("click", function(){sp.showPanel('item1');return false; }, false);
Spry.$$("#link2").addEventListener("click", function(){sp.showPanel('item2');return false; }, false);
Spry.$$("#link3").addEventListener("click", function(){sp.showPanel('item3');return false; }, false);
Spry.$$("#link4").addEventListener("click", function(){sp.showPanel('item4');return false; }, false);
Spry.$$("#link5").addEventListener("click", function(){sp.showPanel('item5');return false; }, false);
Spry.Utils.addLoadListener(InitPage);
What's weird is that I seem to be the only soul in the universe experiencing this. And yet, every single slideshow I develop shows all panels on load... why?

Automatically Animating Spry Accordion Widget on Page Load

I've been searching and searching and still can't find a clue
as how to make the Spry Accordion Widget automatically open the
next panel. I want the panels to expand automatically and loop back
at the last panel.
Do I need to create another function for this or is there
already a function created in the .js file?
Any help is appreciated...even if you can point me in the
right direction.
Thanks!

DeviseInnovations wrote:
> I've been searching and searching and still can't find a
clue as how to make
> the Spry Accordion Widget automatically open the next
panel. I want the panels
> to expand automatically and loop back at the last panel.
>
> Do I need to create another function for this or is
there already a function
> created in the .js file?
>
> Any help is appreciated...even if you can point me in
the right direction.
Sounds more like you'd want sliding panels:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
I've seen an automatic version created that might do what you
want:
http://www.3rd-eden.com/Spry-it.com/examples/slidingpanelsautomatic/
But if you really want an Accordion, then you might be able
to adapt the code in the auto sliding panels above.
FYI: There's a Spry forum that would be better to post Spry
related question in:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

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 widget IE8 ONLY issue

hello everybody,
i noticed a strange "jumpy" behavior while using the spry accordion widget -- this affects IE8 only (currently using 8.0.6001.18882 on vista), other browsers (including IE7 and IE8 forced into IE7 mode) work as expected. this issue seems to be related to the margin property of the accordion container...
not shure whether this behavior is related to IE rendering or the spry javascript code itself... anyway i made NO changes to the spry script (my version is 0.15, 1.6.1, which i believe to be most recent one).
the xhtml (strict) and css are perfectly valid (there might be some MINOR css hacks which are not related to the accordion itself). i do NOT use ANY padding on the inner container of the accordion (which would definetely make the spry js count the tween in odd way). the accordions (especially the main menu on the left) are little more complex, but they were built according to the spry widget document, found on the adobe spry website.
so, here it is -- check the accordion on the left side (the bug seems to happen almost always while opening/closing the last BLUE "section" of the accordion, please play with the accordion for a while to reproduce it -- while the accordion closes, it "loses" it's bottom margin (i guess), what's even more wierd, everything gets back to place after you move a mouse):
http://www.prazskematky.cz/home.php
PLEASE NOTICE: since the website is still under development and i'm using a IE meta tag to force it into IE7 rendering, to reproduce this behavior please be shure to switch IE engine to IE8 standards mode
well, we all now how IE handles css... so it's propably an IE bug -- anyway if you have encountered a similar issue of even better found a fix, please let know. (i don't consider a fix switching to another js library, i would like to use the spry, because of it's DW integration)
many thanks,
p.s.

ross m. greenberg wrote:
> Now however the entire .gif is not appearing in the
accordion panel is expanded. I insert the graphic using a standard
"menu insert/graphic/browse and select"
>
> the graphic file is not showing up properly on such an
insert...
Are you referring to what it looks like in Design view? If
so, that's
correct. Accordion panels have a fixed height. From memory, I
think it's
200px. However, if you test the page in a browser, you should
see a
scrollbar automatically generated on panels that have content
that
exceeds the height of the panel.
If you want flexible-height panels in the accordion, you need
to adjust
both the CSS and the script that initializes the accordion. I
have
covered all the details in my "Essential Guide to Dreamweaver
CS3" (and
the forthcoming CS4 edition). You can probably find online
tutorials as
well. Try a Google search for Spry flexible height accordion.
The accordion widget has been around since CS3, and it hasn't
changed in
CS4, so a Google search should bring up a lot of information.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Spry Accordion Image Issue

I have inserted a Spry Accordion in Dreamweaver CS5, however, I'm having issues with the viewing of the tabs on load, on hover, etc. I want a dark blue tab on load, have it change to a wavy red white tab, and when opened go to a dark blue tab with a star. I can never get this to work as I want. I've checked the image files and they are labeled correctly. The test site is www.sbcvote.us/index_spry.html
I am a novice, and really have a hard time on this issue, that no doubt is not that complicated to those that know.
Thank you in advance for your help.
On my index page I have the css page reference.
<link href="/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
the css code is:
.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;
font:Verdana, Geneva, sans-serif;
color:#FFF;
font-weight:bold;
background:(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* 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 {
overflow: auto;
margin: 0px;
padding: 0px;
height: 200px;
background-color:#EEE;
/* 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:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* 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 {
background:url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
.AccordionPanelOpen .AccordionPanelTabHover {
background: url(/images/accordion/accordion_tabs_redwhite.jpg) no-repeat;
/* 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:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* 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:url(/images/accordion/accordion_tabs_bluestar.jpg) no-repeat;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
background-color: #EEE;

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.

Spry Accordion shows scrollbars on initial load

Similar Messages

Maybe you are looking for