Spry Accordion On Click

How can you get the spry accordion to open and close on a
mouse click? Also, we do not want the first tab to be opened. We
would like the user to click on the tab first then it should
open.

shawnBerger wrote:
> How can you get the spry accordion to open and close on
a mouse click? Also, we do not want the first tab to be opened. We
would like the user to click on the tab first then it should open.
You can set which panel to open in the code that creates the
Accordion panel:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
If you do not want any panel to be opened when the page
loads, take a look at the "Starting with All Panels Closed" sample.
If you want a panel to open and close with a click, rather
than having to click on another panel in the accordion, then take a
look at the "Programatically Opening and Closing Panels" sample.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Similar Messages

  • Using an image as label in Spry Accordion Menu

    I was wondering if it was possible to use an image instead of
    text in the spry accordion menu. I have replaced the text that is
    there with a roll-over image link however I'm unable to label it
    since it uses the text as the label and therefore can't set the
    default panel I want opened. Is there a way to do this? Thanks for
    your help.

    Stefaan Lesage wrote:
    Is this possible with Pages 09 ? And can I achieve this ?
    Is it possible to look at the Help or at the Pages User Guide
    In the English one, page 17, we may read:
    • Some graphics, such as watermarks or logos, appear on pages. These objects are called master objects. If you cannot select an object in a template, it’s probably a master object. To learn more, see “Using Master Objects (Repeated Background Images)” on page 60.
    You can drag or place objects on a page, including imported graphics, movies, and sound, or objects that you create within Pages, including text boxes, charts, tables, and shapes.
    You can also insert pages that have been preformatted for the template you’re using. Click Pages or Sections in the toolbar and choose a template page. The new page is added immediately after the page where you placed the insertion point.
    Yvan KOENIG (from FRANCE vendredi 27 février 2009 23:01:32)

  • 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>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <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">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <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">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </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

  • .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> <!--
    accordion panel tab -->
    <div class="AccordionPanelContent">
    <div spry:state="loading"><img
    src="./i/ajax-loader.gif"/></div> <!-- loading -->
    <div spry:state="error"><span spry:content="Error
    loading data..."></span></div> <!-- error -->
    <div id="details" spry:state="ready"
    spry:content="{detail}"></div> <!-- detail when ready
    -->
    </div> <!--accordion panel content -->
    </div> <!-- accordion panel -->
    <script type="text/javascript">
    <!--
    var AccordionSpecials = new
    Spry.Widget.Accordion("AccordionSpecials", { defaultPanel: 0,
    duration: 1000, useFixedPanelHeights: false, enableAnimation:true }
    var observer = { onPostLoad: function(notifier, data) {
    CD_Init() ; /*alert("postLoad"); */} };
    //specialDisplay dsSpecials.addObserver(observer);
    Spry.Data.Region.addObserver("specialDisplay", observer);
    //-->
    </script>
    </div> <!-- accordion -->
    </div> <!-- specialDisplay -->
    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 default panel in Master Detail Page

    Hi everyone,
    First time post and need a little help.
    I created a SQL database and put the recordsets in a spry accordion panel as the master section. I have another spry accordion that is my detail section. When I open up the panels in the master section and click on any of the records, it updates the detail region just fine. I did this by passing the record set using php which I don't know, to the detail region. So far, great.
    What I now need to do is when I open a panel, I want that panel to stay open. This dosen't seem to work regardless what I do. I believe that in passing the recordset set between the two regions, it is refreshing the page. I tried using code to pass the panel number too but this is not working.
    Here is the an example of one of the panels.
      <div class="AccordionPanel">
        <div class="AccordionPanelTab"><h3>Doctor Who</h3></div>
        <div class="AccordionPanelContent">
            <table width="385" border="0" class="AccordionPanel" id="content1">
              <?php do { ?>
                <tr>
                <td >
                   <a id="content1" href="?recordID=<?php echo $row_Doctor_Who['prod_key_name']; ?>&panel=1"; > <?php echo $row_Doctor_Who['video_name']; ?></a>
                   </td>
                </tr>
                <?php } while ($row_Doctor_Who = mysql_fetch_assoc($Doctor_Who)); ?>
            </table>
        </div>
      </div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: params.panel ? params.panel: 0, useFixedPanelHeights: false});
    -->
    </script>
    If someone can give me some pointers that would be great. I was also thinking of redoing my menus so when a user clicks on an entry, it will open up another page with that panel open or even going to another section of the same page. I'm not a php programmer and taken a beginners class in HTML and Javascript so if you can keep things simple that would be great.
    Thanks soo much for helping out if you can!

    PHP, being a serverside code, will refresh the page each time there is a request made to the server. JavaScript (and Spry), being a client side code, does not have to send requests to the server and therefore allows you to change the data without a page refresh.
    Having said that, you need to have a Spry dataset in your Accordion panel.
    By following these steps, you will be well on your way to achieving what you want.
    Retrieve your data using PHP and place it in an HTML-table or similar outside of the Accordion panel
    Create a SpryHTMLDataSet based on the HTML-table
    Use the data from the Spry dataset to create a master/detail region in your Accordion panel
    Just a few questions before I go into details.
    Have you set up a connection to a database, thus be able to retrieve the data?
    Why do you need an Accordion panel to show your data?
    Have you got an online URL so that we can follow your code? Otherwise please include your code in your post.
    Please come back here with your answers and we shall try to help you on your way
    Ben

  • Controlling spry accordion from flash doesn't work in IE 8

    Hi all,
    I created a spry accordion in an html page and a little spry controller in flash, on the same page.
    The flash controller contains buttons that should trigger the accordion in the same page.
    here is the code I inserted in a flash button:
    on (release) {
    getURL ("javascript:acc_ricette.openPanel('mypanel_ID'); return false;")
    where mypanel_ID is the ID of the accordion on the page.
    When I click any flash button this works perfectly in firefox and chrome, but it doesn't work in IE 8 and Opera.
    The accordion itself (not using the flash buttons) works in all browser.
    Is there a solution
    TIA
    tony

    Hi all,
    I created a spry accordion in an html page and a little spry controller in flash, on the same page.
    The flash controller contains buttons that should trigger the accordion in the same page.
    here is the code I inserted in a flash button:
    on (release) {
    getURL ("javascript:acc_ricette.openPanel('mypanel_ID'); return false;")
    where mypanel_ID is the ID of the accordion on the page.
    When I click any flash button this works perfectly in firefox and chrome, but it doesn't work in IE 8 and Opera.
    The accordion itself (not using the flash buttons) works in all browser.
    Is there a solution
    TIA
    tony

  • Strange behavior of Spry Accordion in IE

    Hi there,
    I am using DW CS3 and I inserted a spry Accordion in the html
    page. I added about 15 or so panels to the accordion. It works fine
    in Firefox but in IE 6 when I click on a panel that is some where
    in the middle or at the bottom of the page, the page moves up where
    the first panel is located in the page as if I clicked on first
    panel.
    Any idea what is going on?
    Thanks
    Joe

    I am having exactly this same problem. I've made up an
    example at
    www.24031951.com/AccordionTest.html.
    It uses Spry 1.6.1, // SpryAccordion.js - version 0.15 - Spry
    Pre-Release 1.6.1 and doesn't use "tabindex"
    There is also a live site using the Spry Accordion at
    www.SETZERiZER.eu/en/health.php
    where the same problem exists.
    Any suggestions?
    with regards,
    Dr. Rusty

  • Spry Photo album not working with spry accordion

    I am trying to get a photo album to work in the spry
    accordion - so that each panel you click on the accordion is a new
    photo subject (ie waterfalls, sunsets ect) but it does not work
    well. Both the thumbs and the main picture are visible through all
    the accordion panels instead of the one I put it in. Any ideas why
    it might not work? Would you need to see my code?
    Thanks

    oh, you can see the website at http://redesignsbyava.com

  • 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 not working!

    I have a spry accordion in my page and I'm using Dreamweaver to do my editing.  I use this all the time, but have never had this happen before.  When in Design mode, if I click anywhere within the accordion structure a blue box appears around the structure, and I am unable to made any edits.  When I hover over the structure, I get a pop-up that shows ID, DIV, Overflow, etc.
    Can anyone help me?

    You probably have overflow:hidden specified somewhere in your CSS code for float containment.
    Use Split View or Code View to edit the code.
    Or, double click in Design View.
    Or, right-click in Design View and & select Element View > Full.
    Nancy O.

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

    Have a Dreamweaver question about the Spry Accordion widget.
    I am designing a website for a real estate company. I will have different pages set up as a state page with a sub-level of cities within the page. I am using the accordion widget for the cities. As you know, you click on the panel tab and the next panel drops up or down closing/opening the previous panel.
    What I would like to do is add an action anchor (view all properties) outside the spry widget to open all the panels at once if a client wanted to see the entire list. However, I would still want the functionality of the panels to be collapsible. Is this possible? Is there a bit of code restructuring I would have to do to the JavaScript?

    Try
    <!DOCTYPE html>
    <html>
    <head>
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
    <style>
    .openit .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    </style>
    </head>
    <body>
    <a href="#" class="openAll">open all</a> - <a href="#" class="closeAll">close all</a>
    <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 src="SpryAssets/SpryAccordion.js"></script>
    <script src="SpryAssets/SpryDomUtils.js"></script>
    <script>
    function MyOpenAllEventHandler() {
        Spry.$$("#Accordion1").addClassName("openit");
    function MyCloseAllEventHandler() {
        Spry.$$("#Accordion1").removeClassName("openit");
    Spry.$$(".openAll").addEventListener("click" , MyOpenAllEventHandler, false);
    Spry.$$(".closeAll").addEventListener("click" , MyCloseAllEventHandler, false);
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>
    The "!important" on these rules is necessary because the Accordion  widget places inline styles on the actual AccordionPanelContent elements  when opening and closing them. Since inline styles have a higher CSS  specificity then CSS class rules, "!important" is necessary to "trump"  the inline styles.
    Gramps

  • Spry Accordion Panels view incorrect in IE8

    I have a page set up using both spry menu and spry accordion panels. The problem is that in FireFox and Chrome, the pages view as they should. However, in IE, the panels on the accordion spread and are open, it doesn't view as it should. The test page is here www.sbcvote.us/index1.html the source code is below. My initial guess is that I have an open or not closed tag somewhere?
    <!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>Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters</title>
    <meta name="keywords" content="Joe Paul Gonzalez, San Benito County, Clerk, Auditor, Recorder, Registrar of Voters, fppc form 460, reconveyance deed, deed of reconveyance, reconveyance, homepage, mechanics lien release, quit claim deed form, release of mechinics lien, form, san, reconveyance, county, deed, 460, california, fppc, nacimiento, trust, elections, ca, solictud, certifacadas, reporting, statements, nominees, handbook, contribution, joe, paul, gonzalez" />
    <meta name="description" content="Joe Paul Gonzalez San Benito County Clerk-Auditor-Recorder-Registrar of Voters" />
    <link href="scripts/style.css" rel="stylesheet" type="text/css" />
    <script src="/SpryAssets/menu/SpryMenuBar.js" type="text/javascript"></script>
    <script src="/SpryAssets/accordion/SpryAccordion.js" type="text/javascript"></script>
    <link href="/SpryAssets/menu/SpryMenuBarHorizontal_sbcvote.css" rel="stylesheet" type="text/css" />
    <link href="/SpryAssets/accordion/SpryAccordion_sbcvote.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
    function clearText(field)
        if (field.defaultValue == field.value) field.value = '';
        else if (field.value == '') field.value = field.defaultValue;
    </script>
    </head>
    <body>
    <div id="wrapper">
        <div id="header"><!-- end of site_title -->
          <div id="header_right">
                <ul id="header_button">
                    <li><a href="#"><img src="images/home.jpg" alt="home" /></a></li>
                    <li><a href="#"><img src="images/contact.jpg" alt="contact us" /></a></li>
                </ul>
                <div class="cleaner"></div>
                <form action="#" method="get">
                    <input type="text" value="Enter a keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />
                    <input type="submit" name="Search" value="" alt="Search" id="searchbutton" title="Search" />
                </form>
          </div>
        </div> <!-- end of header -->
        <div id="banner">
        <div id="banner_box">
            <ul>
            <li><a href="clerk.htm" ><span class="current"></span><img src="images/countyClerk.jpg" alt="San Benito County Clerk" /></a></li>
                <li><a href="auditor.htm"><span></span><img src="images/countyAuditor.jpg" alt="San Benito County Auditor" /></a></li>
                <li><a href="recorder.htm"><span></span><img src="images/countyRecorder.jpg" alt="San Benito County Recorder" /></a></li>
                <li><a href="http://results.sbcvote.us" target="_new"><span></span><img src="images/coRegistrar_results.jpg" alt="" /></a></li>
            </ul>
            </div>
        </div> <!-- end of banner -->
        <div id="menu">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a class="MenuBarItemSubmenu" href="index.html">Home</a>
              <ul>
                <li><a href="#">Item 1.1</a></li>
                <li><a href="#">Item 1.2</a></li>
                <li><a href="#">Item 1.3</a></li>
              </ul>
            </li>
            <li><a href="registrar/candidateinfo.htm" class="MenuBarItemSubmenu">Candidate Info</a>
              <ul>
                <li><a href="candidate_forms_manuals.htm">Forms &amp; Manuals</a></li>
                <li><a href="pdf/forms/registrar/candidates/2010CandidateHandbook.pdf">2010 Candidate Handbook</a></li>
                <li><a href="registrar/form460.htm" class="MenuBarItemSubmenu">FPPC 460s</a>
                  <ul>
                    <li><a href="registrar/form460_all.htm">Candidate Form 460s</a></li>
                    <li><a href="registrar/2010_form460.htm">2010 Candidate 460 Forms</a></li>
                    <li><a href="registrar/2009_form460.htm">2009 Candidate 460 Form</a></li>
                    <li><a href="registrar/2008_form460.htm">2008 Candidate 460 Form</a></li>
                    <li><a href="registrar/2007_form460.htm">2007 Candidate 460 Form</a></li>
                  </ul>
                </li>
                <li><a href="candidate_reporting.htm">Reporting</a></li>
              </ul>
            </li>
            <li><a class="MenuBarItemSubmenu" href="registrar/votebymail.htm">Vote-By-Mail</a>
              <ul>
                <li><a class="MenuBarItemSubmenu" href="overseasvoting.htm">Overseas Voting</a>
                  <ul>
                    <li><a href="pdf/forms/registrar/votebymail/oversees_votebymail_request.pdf">Overseas Vote-By-Mail Request</a></li>
                    <li><a href="pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide Military Overseas</a></li>
                    <li><a href="#">Untitled Item</a></li>
                  </ul>
                </li>
                <li><a href="mailvotestatus.htm">Ballot Status</a></li>
                <li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_eng.pdf">Application </a></li>
                <li><a href="pdf/forms/registrar/votebymail/votebymail_app_gen_SPAN.pdf"> Espa&ntilde;ol</a></li>
              </ul>
            </li>
            <li><a href="/registrar/registration.htm" class="MenuBarItemSubmenu">Register to Vote</a>
              <ul>
                <li><a href="registrar/national_vrc_notice.htm">Form English</a></li>
                <li><a href="http://www.sbcvote.us/registrar/national_vrc_notice_sp.htm">Espa&ntilde;ol</a></li>
                <li><a href="registrar/statement_distribution.htm">Distribution</a></li>
              </ul>
            </li>
            <li><a href="registrar/pollworker.htm" class="MenuBarItemSubmenu">Pollworker</a>
              <ul>
                <li><a href="registrar/pollworker.htm">Become a Pollworker</a></li>
                <li><a href="registrar/pollworker.htm#student">Students</a></li>
                <li><a href="registrar/pollworker.htm#student">State Employees</a></li>
              </ul>
            </li>
            <li><a href="registrar/hava_faqs.htm" class="MenuBarItemSubmenu">HAVA</a>
              <ul>
                <li><a href="registrar/hava_complaint_procedure.htm">Complaint Procedure</a></li>
                <li><a href="registrar/hava_compliancemanual.htm">Compliance Manual</a></li>
              </ul>
            </li>
    </ul>
    </div> <!-- end of menu -->
        <div id="content_wrapper">
        <div id="left_sidebar">
            <div class="box">
                <h2><span></span>Click on a Tab for Info</h2>
                    <div class="body">
                        <ul class="side_menu">
                          <li>
                            <div id="Accordion1" class="Accordion" tabindex="0">
                              <div class="AccordionPanel">
                                <div class="AccordionPanelTab">Vote-By-Mail (VBM)</div>
                                <div class="AccordionPanelContent"><a href="/registrar/votebymail.htm">Vote-By-Mail Voting</a><a href="/pdf/forms/registrar/votebymail/overseas_votebymail_request.pdf">Overseas VBM Request</a>
                                  <a href="/pdf/forms/registrar/votebymail/VBM_Application.pdf">Application for Permanent VBM </a><a href="/pdf/forms/registrar/votebymail/guide_military_overseas.pdf">Guide to Military Voting</a>
                                  <a href="/pdf/forms/registrar/votebymail/votebymail_app_general_county_fill.pdf">Application VBM General Election</a><a href="/registrar/mailvotestatus.htm">Did My VBM Ballot Get Counted?</a><br />
                                    <br />
                                  <br />
    </div>
                              </div>
                              <div class="AccordionPanel">
                                <div class="AccordionPanelTab">Voto Por Correo</div>
                                <div class="AccordionPanelContent"><a href="/registrar/spanish/voto.por.correro.html">Voto Por Correro</a><a href="/registrar/spanish/overseasvoting.SPAN.html">Votante Información Extranjero</a><a href="/registrar/mailvotestatus.htm">Cheque se recibimos su voto por correro</a> <a href="/pdf/forms/registrar/votebymail/VBM_ApplicationSPAN.pdf">Solicitud de Balota de Votación por correo en California</a></div>
                              </div>
                              <div class="AccordionPanel">
                                <div class="AccordionPanelTab">Voter Information</div>
                                <div class="AccordionPanelContent"> <a href="/registrar/national_vrc_notice.htm">Register to Vote</a>
                                  <a href="http://www.voterguide.sos.ca.gov/pdf/english/" target="_new">Voter Information Guide Nov 2010</a>
                                  <a href="/pdf/forms/registrar/register/YourRightToVote_ENG.pdf">Your Right to Vote</a>                              <a href="/pdf/forms/registrar/register/eng-list-of-certified-candidates11.10.pdf">Certified Candidates Nov 2010</a>
                                  <a href="/pdf/forms/registrar/register/TimeOfftoVote_ENG.pdf">Time Off to Vote </a><br />
                                  <br />
                                </div>
                              </div>
                              <div class="AccordionPanel">
                                <div class="AccordionPanelTab">Votante Informaci&oacute;n</div>
                                <div class="AccordionPanelContent"> <a href="/pdf/forms/registrar/register/Guide_Voting_SPAN.pdf" target="_new">Gu&iacute;a para Votar</a> <a href="/registrar/national_vrc_notice_sp.htm">Insc&iacute;ibase para Votar</a> <a href="/pdf/forms/registrar/register/Voter-bill-of-rights.SPAN.pdf">Declaración  derechos de  Votantes</a> <a href="/pdf/forms/registrar/register/spanish-vig-nov-2010.pdf">Gu&iacute;a Oficial  Informaci&oacute;n Nov 2010</a> <a href="/pdf/forms/registrar/register/spanish-list-of-certified-candidates11.10.pdf">Lista Candaditos Certificados 2010 </a><a href="/pdf/forms/registrar/register/TimeOfftoVote_SPAN.pdf">Tiempo Libre Para Votar</a></div>
                              </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">For the Candidates</div>
                                <div class="AccordionPanelContent">Blank 460 Forms<br />
                                  Candidates 460 Forms Index<br />
                                2010 Candidate Handbook<br />
                                2010 Calendar </div>
                            </div>
                              <div class="AccordionPanel">
                                <div class="AccordionPanelTab">Nov 2, 2010 Election</div>
                                <div class="AccordionPanelContent">Election Results Page<br />
                                  Canvass of the Vote
                                    <br />
                                    Vote-By-Mail Ballot Look up<br />
                                    State Vote Pamphlet<br />
                                    Sample Ballot Statewide
                                </div>
                              </div>
                              <div class="AccordionPanel">
                                <div class="AccordionPanelTab">Label 7</div>
                                <div class="AccordionPanelContent">Content 7</div>
                              </div>
                              <div class="AccordionPanel">
                                <div class="AccordionPanelTab">Label 8</div>
                                <div class="AccordionPanelContent">Content 8</div>
                              </div>
                            </div>
                          </li>
                            <li> <a href="#">Lorem ipsum dolor</a></li>
                    <li><a href="#">Donec bibendum semper</a></li>
                            <li><a href="#">Proin tincidunt dapibus</a></li>
                            <li><a href="#">Nulla consequat</a></li>
                            <li><a href="#">In enim justo</a></li>
                            <li><a href="#">Aenean vulputate</a></li>
                            <li><a href="#">Etiam ultricies</a></li>
                            <li><a href="#">Nullam vehicula egestas </a></li>             
                        </ul>
    </div>
                <div class="box_bottom"><span></span></div>
                </div>
                <div class="box">
                <h2><span></span>Our Departments</h2>
                    <div class="body">
              <ul class="side_menu">
                            <li><a href="clerk.html">County Clerk</a></li>
                            <li><a href="auditor.html">County Auditor</a></li>
                            <li><a href="recorder.html">County Recorder</a></li>
                            <li><a href="index.html">Registrar of Voters</a></li>
                            <li><a href="http://results.sbcvote.us" target="_new">Election Results</a></li>
                            <li></li>
                            <li></li>
                            <li></li>
    </ul>
                    </div>
                <div class="box_bottom"><span></span></div>
                </div>
            </div> <!-- end of left_sidebar -->
            <div id="content">
    <div class="box">
                <h2><span></span>Welcome to the San Benito County Registrar of Voters</h2>
                    <div class="body">
                        <p> Welcome to our new and updated website for the County of San Benito Clerk-Auditor-Recorder- Registrar of Voters. </p>
                  </div>
                <div class="box_bottom"><span></span></div>
                </div>
                <div class="box">
                <h2><span></span>News and Updates</h2>
                    <div class="body">
                        <div class="news_box">
                          <h3><a href="http://results.sbcvote.us" target="_new">November 2, 2010 Election Results</a></h3>
                            <p>Up to the minute election results for San Benito County will be uploaded to our website at the close of the polls on Tuesday, November 2, 2010 at<a href="http://results.sbcvote.us" target="_new"> http://results.sbcvote.us.</a></p>
                          <div class="cleaner"></div>
                      </div>
                  <div class="news_box">
                    <h3><a href="registrar/mailvotestatus.htm">Vote-By-Mail Ballots</a>
                    </h3>
                    <p>Verify that your Vote-By-Mail Ballot has been received <a href="/registrar/mailvotestatus.htm">here.</a> To insure that your vote is counted, drop off your VBM ballot to our offices on the second floor of the courthouse building room 406 BEFORE Tuesday, Nov. 2, 2010.</p>
                        <div class="cleaner"></div>
                    </div>
                  <div class="news_box">
                        <a href="#"><img class="news_image" src="images/image_08.jpg" alt="image" /></a>
                   <h3><a href="#">Auditor's Department</a></h3>
                        <p> Praesent rhoncus faucibus nibh, non molestie lectus sagittis sed. Praesent ac sem lectus. Cras molestie elit sit amet velit tincidunt imperdiet. Mauris nulla purus.</p>
                    <div class="cleaner"></div>
                    </div>
                    <div class="more float_r"><a href="#">View All</a></div>
                    <div class="cleaner"></div>
                    </div>
                <div class="box_bottom"><span></span></div>
                </div>
            </div> <!-- end of content -->
           <div id="right_sidebar">
            <div class="box">
                <h2 align="center"><span></span>Joe Paul Gonzalez</h2>
                    <div class="body">
                      <ul class="side_menu">
                            <li></li>
                            <li></li>
                            <li><img src="images/joepaul_new.jpg" width="207" height="262" alt="joe paul gonzalez" /></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li><a href="#">County Clerk-Auditor-Recorder</a></li>                   
                      </ul>
                  </div>
                <div class="box_bottom"><span></span></div>
                </div>
                <div class="sidebar_box">
          <a href="http://results.sbcvote.us" target="_new"><img src="images/results.jpg" alt="Election Results" /></a>            </div>
                <div class="sidebar_box">
                <a href="#"><img src="" alt="City Zoo" /></a>            </div>
          </div> <!-- end of right_sidebar -->
            <div class="cleaner"></div>
        </div> <!-- end of content_wrapper -->
    </div> <!-- end of wrapper -->
    <div id="footer_wrapper">
    <div id="footer">
            <ul class="footer_menu">
            <li><a href="#">Homepage</a></li>
                <li><a href="#">Site Map</a>
                </li>
                <li><a href="#">Clerk</a>
                </li>
                <li><a href="#">Auditor</a></li>
                <li><a href="#">Recorder</a></li>
                <li><a href="#">Registrar of Voters</a></li>
                <li><a href="#">Election Results</a></li>
                <li><a href="#">Forms</a></li>
                <li class="last_menu"><a href="#">Contact</a></li>
            </ul>
            Copyright © 2010 <a href="http://www.netwidesales.com" target="_new">NetWideSales</a> |
            <a href="http://www.netwidesales.com" target="_new">Designed by Irma C. Gonzalez</a> |
        <a href="http://www.joepaulgonzalez.com" target="_new">Joe Paul Gonzalez</a> </div> <!-- end of footer -->
    </div> <!-- end of footer_wrapper -->
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/images/menubar/SpryMenuBarDownHover.gif", imgRight:"/images/menubar/SpryMenuBarRightHover.gif"});
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>
    I appreciate any help here, it really doesn't make sense to me, it did work for a few viewing in IE and I must have changed something by mistake?
    Thanks again.

    I added a set width to the accordion css and that solved the problem of the widget running across the page. The IE issue appears to be an ongoing issue with IE. If a viewer has IE8, then hitting the compatibility button on the menu bar will solve the viewing problem. If not, it doesn't view correctly. It views fine on other browsers (Chrome, etc). Problem is how many people will know to hit the compatibility button?
    Thank you for your help, I appreciate the time taken.

  • Spry Accordion not collapsing properly in IE & Firefox

    My design portfolio is on my testing server. The accordion
    works perfect in Safari but it will not collapse in Firefox and
    Internet Explorer. Here is the link:
    http://deptart2.memphis.edu/~jwilcoxen/web_portfolio/home.php
    . Please help. I attached my spry accordion css.
    @charset "UTF-8";
    /* SpryAccordion.css - Revision: Spry Preview Release 1.4 */
    /* 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 {
    border-left: none gray;
    border-right: none black;
    border-bottom: none gray;
    overflow: auto;
    background-color: #FFFFFF;
    font-family: "Gill Sans", "Helvetica Neue", "Arial Narrow",
    sans-serif, Helvetica;
    padding: 10px;
    background-image: url(../images/glowbg_home.jpg);
    background-repeat: no-repeat;
    text-align: left;
    text-indent: 8px;
    /* 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;
    background-color: ##54275F;
    /* This is the selector for the AccordionPanelTab. This
    container houses
    * the title for the panel. This is also the container that
    the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this
    selector is not necessary
    * to make the widget function. You can use any class name
    you want to style an
    * accordion panel tab container.
    .AccordionPanelTab {
    background-color: #000000;
    border-top: 1px none black;
    border-bottom: 1px none gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    color: #CCCCCC;
    font-family: "Gill Sans", "Helvetica Neue", "Arial Narrow",
    sans-serif, Helvetica;
    font-size: 12px;
    font-weight: normal;
    /* 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: hidden;
    margin: 0px;
    padding: 0px;
    background-color: #CCCCCC;
    text-align: left;
    vertical-align: 50%;
    height: 326px;
    /* 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: #4F285B;
    /* 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: #51275D;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #FFFFFF;
    background-color: ##54275F;
    /* 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: #000000;
    /* 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: ##54275F;
    height: 310px;

    Thanks Gramps, that information was really helpful.
    I just removed all instances of 'rgba' in the .css rules that specify color, changing it to 'rgb' and also removing the 4th parameter indicating the transparency value.
    Now that I understand what the problem was it actually makes complete sense, since IE does not support transparency.
    Thanks again.

Maybe you are looking for

  • I have some queries related to Nexus .

    I have some queries regarding Nexus Architecture. 1) We have MSFC and PFC for layer 3 & layer 2 communication in 6500 . How layer 2 & 3 traffic is been handled in Nexus. Do they have a specific asics. What are those asics ? 2) We have three types o

  • Iphone 3gs only works while on wall charger

    Hi i have and iphone 3gs and it only will stay powered on while being plugged into a wall charger, then it wil freeze and turn off again, I have tried holding down the sleep and power button but it doesnt seem to help. Can anyone else help me so that

  • Time limit on imovie

    I am working with iMovie 11 for the first time and all was going well until my movie reached the 4:10 mark. Is there a setting I need to change? Any help is appreciated.

  • Need help on JTAPI

    Hello Friends, I am involved in a telephony software development...and I want to use JTAPI for it...but Iam encountering a very basic problem...Iam having jdk1.3 installed in my PC...but whenever I import the javax.telephony.* package,I get an error

  • Specific cell event of Jtable

    Hi, I've created an view object by linking up 2 tables, and placed it on the screen by Jtable, select a.emp_name, a.dept_id, b.dept_name from employee a, department b; Is it possible to write an event that will reflesh and display the "dept_name" pro