Accordion within an Accordion

Does the SpryAccordion have support for maintaining a second
accordion within a content panel?

It should, but we currently have a bug where accordions
within markup that has a style of display:none when the onload
event fires don't calculate their panel heights correctly.
What this translates into is that accordions don't work
inside accordion panels, tabbed panels, or collapsible panels that
are not initially open don't size properly.
I'm hoping to fix that for the up coming release.
--== Kin ==--

Similar Messages

  • How to create anchor links within a spry accordion?

    I am using the spry accordion from DW CS6. HAving 6 panels.
    I want to do this but can't manage it the usual html way...and I am clueless about javascript:
    I want to create a wordlink that forwards people to the content of a different panel within the same accordion.
    I tried the usual naming of anchor and creating link to such but nothing happens. I googled a bit for answers but I come up with js and that is abracadabra to me. The names in the js are nothing likie html classes that I can target so I have no clue what to do.
    Any help would be very appreciated on this matter.
    One other problem I am having is this:
    My accordion is broken in the Opera browser....anybody an idea what causes this? Do I miss some plug in my browser?

    I am using the spry accordion from DW CS6. HAving 6 panels.
    I want to do this but can't manage it the usual html way...and I am clueless about javascript:
    I want to create a wordlink that forwards people to the content of a different panel within the same accordion.
    I tried the usual naming of anchor and creating link to such but nothing happens. I googled a bit for answers but I come up with js and that is abracadabra to me. The names in the js are nothing likie html classes that I can target so I have no clue what to do.
    Any help would be very appreciated on this matter.
    One other problem I am having is this:
    My accordion is broken in the Opera browser....anybody an idea what causes this? Do I miss some plug in my browser?

  • Accordion - Ajax within accordion panel resize issue

    Hi,
    I'm in a little bit of a fix.
    I have an accordion whose panels have ajax enabled regions
    within them.
    The ajax enabled regions have search forms which give a
    search result within the same page (which is basically within the
    panel as well) once a button is clicked.
    My issue is that once I click search, my result set increases
    the size of the page causing the accodion panel to enable a scroll
    bar. Is there some way in which I can have spry resize the panel
    instead of it enabling a scroll bar?
    If I open and close the tab ofcourse, the region is resized
    to cater to the search results as well with no scroll bar.
    Incase this is not possible, is there a way to reopen the
    selected panel on a page refresh event as all the tabs are closed
    when a refresh occurs.
    Thanks!
    When the accordion opens up, it shows

    Hi kundalani,
    If you are using Spry.Utils.updateContent() to load the
    contents of the panel, you can pass in a callback that sets the
    height of the AccordionPanelContent to "auto" after the new content
    has loaded:
    function LoadContent(ele, url)
    ele = Spry.$(ele);
    Spry.Utils.updateContent(ele, url, function() {
    ele.style.height = "auto"; });
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag1.html'); return false;">Frag 1</a> |
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag2.html'); return false;">Frag
    2</a></p>
    <p> </p>
    <div id="example1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 1
    </div>
    <div id="e1p1" class="AccordionPanelContent">
    <p>Panel 1</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 2
    </div>
    <div id="e1p2" class="AccordionPanelContent">
    <p>Panel 2</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 3
    </div>
    <div id="e1p3" class="AccordionPanelContent">
    <p>Panel 3</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 4
    </div>
    <div id="e1p4" class="AccordionPanelContent">
    <p>Panel 4</p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var example1 = new Spry.Widget.Accordion("example1", {
    useFixedPanelHeights: false });
    </script>
    --== Kin ==--

  • Scrolling within Accordion panel

    Hi, I have an Accordion panel with a lot of text within one of the panels. The panel is pinned and the text flows below the browser baseline when opened on smaller screen sizes. Would be great to have a mini scroll bar included as an option in future to get around this problem. Thanks!

    Hi kundalani,
    If you are using Spry.Utils.updateContent() to load the
    contents of the panel, you can pass in a callback that sets the
    height of the AccordionPanelContent to "auto" after the new content
    has loaded:
    function LoadContent(ele, url)
    ele = Spry.$(ele);
    Spry.Utils.updateContent(ele, url, function() {
    ele.style.height = "auto"; });
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag1.html'); return false;">Frag 1</a> |
    <a href="#" onclick="LoadContent('e1p2',
    '../../data/frag2.html'); return false;">Frag
    2</a></p>
    <p> </p>
    <div id="example1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 1
    </div>
    <div id="e1p1" class="AccordionPanelContent">
    <p>Panel 1</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 2
    </div>
    <div id="e1p2" class="AccordionPanelContent">
    <p>Panel 2</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 3
    </div>
    <div id="e1p3" class="AccordionPanelContent">
    <p>Panel 3</p>
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 4
    </div>
    <div id="e1p4" class="AccordionPanelContent">
    <p>Panel 4</p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var example1 = new Spry.Widget.Accordion("example1", {
    useFixedPanelHeights: false });
    </script>
    --== Kin ==--

  • Static/Standard links within Muse Accordion menu widget

    Hi,
    I'm a newcomer to Adobe Muse and so may have missed a menu or option somewhere along the line,
    I'm trying to make a simple alteration to the standard Muse 'accordion' menu widget.
    I'm re-creating a website I've already half built in Dreamweaver, it being a simple design I thought
    this would be a good site to try to build with Muse. As you'll see here: http://www.thisisneil.com/rg-e/
    the accordion on the left hand side has two static links sitting at the bottom of the menu linking to
    a 'Contacts' page and 'Blog' hosted on Tumblr.
    Within Muse, I can't embed these two standard links without the accordion function in the same field?!
    Muse automatically applies the on-click, drop down sub-menu. Is there anyway of disabling the function
    on selected menu items?
    I'd like the two static links to drop down, and pop back up with two two functioning accordion menu's
    sitting above as they do within my dreamweaver example, but can't seem to amend the Muse menu
    to behave in this way. A shame to fall at the first hurdle with such a simple menu amend!
    Any help or thoughts much appreciated.
    Thanks.

    Anybody?!

  • Muse accordion menu within folio article(s)

    I’m working on an accordion menu created in Adobe Muse that is then used in a DPS folio created in InDesign.
    The accordion menu resides on the Master Pages of the articles/documents, 6 articles total.
    When the label is tapped, the accordion menu expands open >
    The label is also a link that takes the reader to a page within the folio while expanding (using the navto://documentname#page formatting) >
    Inside the content area of each label are subtopics that also navigate to different pages within the folio (also using the navto://documentname#page formatting).
    My desire is that when a label is tapped and expands, the reader can then click on each subtopic and go to that page without the accordion menu collapsing as it goes to the page.
    I’m finding that 99.9% of the time, the menu is collapsing. Other times I get the exact performance I desire.
    I’m Ok with the menu collapsing as each label is tapped, but not the subtopics.
    I’ve played around with setting the accordion properties by unchecking “Collapse All” and unchecking “Edit Together”, but can’t seem to edit these sections or the text boxes individually. It either sets ALL items in the accordion menu to Collapse All or not. No mixing of the two settings.
    Within InDesign, it actually seems as though this menu, although on the Master Page, is functioning individually on each document page.
    Is there a way to get the desired functionality, outlined above, with the accordion menu widget?
    TIA,
    Hunter

    The only way you'd be able to keep the menu from being collapsed when you come back to the page is to write code in JavaScript to remember the state in localStorage and then read it back when the menu is re-opened. When your reader navigates to another article (and sometimes even page in the same article) in the folio via the menu we will clear the previous article from memory, and the state will be lost.
    Neil

  • Scrollbox within an accordion widget

    How can i put my looong list of brands in a scrollbox within my accordian widget, and still keep the linebraks and links to every brand?

    Hi Kimberly,
    I will have to give it a try still with the box text.
    I'm also having difficulty finding answers for the questions below. I don't mean to bombard you with them I posted them on the forum but haven't any responses. Would you be willing to try and help with them, if you don't mind?
    Thank you,
    Lee
    1. How to create a download link for a PDF?
    2. How to create scroll bars for overflow text? (For this one how would I do this within an accordion and tabbed widget as well?)
    3. How to animate objects and text?
    4. How to add sound?
    5. How to create a downloadable link for purchasing an mp3? (also, is there a free mp3 player widget that anyone may know about that works?)
    6. How do you set up the Paypal widget to have payments go into an account? (I understand how to make a Paypal account and how to insert the widget but am new to selling online.)

  • Tree Component within Accordion Component

    Hello all!
    I've done a navigation scheme that uses both the accordion
    and tree components. The data being gathered is from an XML file.
    The only problem i'm having is getting the tree components to
    display the data that they're being provided with. I did traces and
    I found out that they are getting the data...can anyone take a look
    at the FLA and see what's going wrong?
    http://www.jake3p0.com/downloads/accordionTreeNav.zip
    I'm using Flash 8

    No one has ever tried this? I've posted this problem on 3
    different forums....flashkit, gotoandlearn and adobe....none have
    any responses that help!

  • Using anchor within spry accordion???

    Hi everyone,
    I have an index page www.nateurope.com. The news are linking to an accordion http://www.nateurope.com/news.htm. I added anchors because I thought that it would be nice if the user click on March, 22 Virtual Conference (www.nateurope.com) he would directly get to the open panel March, 22 Virtual Conference on the nateurope.com/news.htm page.
    I tried to get the information I need by googling but the only thing I found is this if you have the button on the same page.
    <input type="button" onclick="acc10.openFirstPanel()" >open first panel</input>
    <input type="button" onclick="acc10.openNextPanel()" >open next panel</input>
    <input type="button" onclick="acc10.openPreviousPanel()" >open previous panel</input>
    <input type="button" onclick="acc10.openLastPanel()" >open last panel</input>
    <script type="text/javascript">
         var acc10 = new Spry.Widget.Accordion("Accordion1");
    </script>
    ->Would this be the solution? Where do I have to add this code?
    I read also that it is only possible if the height is variable but I didn't understand where to implement this information? SpryAccordion .js?
    this.useFixedPanelHeights = true;
    this.fixedPanelHeight = 0;
    Turn true in false? Or just add this code at the end of the page? <script type="text/javascript">
    var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });
    </script>
    Further I found the description of the panel ID http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html but I didn't understand how to implement this code as well.
    I am really lost and would appreciate very much your help. Don't hesitate to contact me if you need further code or information. I would be happy to see how to implement the information .
    Thy a lot in advance.

    Hi Gramps,
    I deleted everything and started right from beginning. Unfortunately without success, probably I made something wrong with the heigth setting? I just changed in .js true to false:
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.Accordion = function(element, opts)
    this.element = this.getElement(element);
    this.defaultPanel = 0;
    this.hoverClass = "AccordionPanelTabHover";
    this.openClass = "AccordionPanelOpen";
    this.closedClass = "AccordionPanelClosed";
    this.focusedClass = "AccordionFocused";
    this.enableAnimation = true;
    this.enableKeyboardNavigation = true;
    this.currentPanel = null;
    this.animator = null;
    this.hasFocus = null;
    this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
    this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
    this.useFixedPanelHeights = false;
    this.fixedPanelHeight = -1;
    Spry.Widget.Accordion.setOptions(this, opts, true);
    if (this.element)
    this.attachBehaviors();
    Spry.Widget.Accordion.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
    return document.getElementById(ele);
    return ele;
    Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
    return;
    ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
    return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
    return;
    for (var optionName in optionsObj)
    if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
    continue;
    obj[optionName] = optionsObj[optionName];
    Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
    if (panel)
    this.addClassName(this.getPanelTab(panel), this.hoverClass);
    return false;
    Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel)
    if (panel)
    this.removeClassName(this.getPanelTab(panel), this.hoverClass);
    return false;
    Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex)
    var panelA = this.currentPanel;
    var panelB;
    if (typeof elementOrIndex == "number")
    panelB = this.getPanels()[elementOrIndex];
    else
    panelB = this.getElement(elementOrIndex);
    if (!panelB || panelA == panelB)
    return null;
    var contentA = panelA ? this.getPanelContent(panelA) : null;
    var contentB = this.getPanelContent(panelB);
    if (!contentB)
    return null;
    if (this.useFixedPanelHeights && !this.fixedPanelHeight)
    this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
    if (this.enableAnimation)
    if (this.animator)
    this.animator.stop();
    this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition });
    this.animator.start();
    else
    if(contentA)
    contentA.style.display = "none";
    contentA.style.height = "0px";
    contentB.style.display = "block";
    contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto";
    if(panelA)
    this.removeClassName(panelA, this.openClass);
    this.addClassName(panelA, this.closedClass);
    this.removeClassName(panelB, this.closedClass);
    this.addClassName(panelB, this.openClass);
    this.currentPanel = panelB;
    return panelB;
    Spry.Widget.Accordion.prototype.closePanel = function()
    // The accordion can only ever have one panel open at any
    // give time, so this method only closes the current panel.
    // If the accordion is in fixed panel heights mode, this
    // method does nothing.
    if (!this.useFixedPanelHeights && this.currentPanel)
    var panel = this.currentPanel;
    var content = this.getPanelContent(panel);
    if (content)
    if (this.enableAnimation)
    if (this.animator)
    this.animator.stop();
    this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition });
    this.animator.start();
    else
    content.style.display = "none";
    content.style.height = "0px";
    this.removeClassName(panel, this.openClass);
    this.addClassName(panel, this.closedClass);
    this.currentPanel = null;
    Spry.Widget.Accordion.prototype.openNextPanel = function()
    return this.openPanel(this.getCurrentPanelIndex() + 1);
    Spry.Widget.Accordion.prototype.openPreviousPanel = function()
    return this.openPanel(this.getCurrentPanelIndex() - 1);
    Spry.Widget.Accordion.prototype.openFirstPanel = function()
    return this.openPanel(0);
    Spry.Widget.Accordion.prototype.openLastPanel = function()
    var panels = this.getPanels();
    return this.openPanel(panels[panels.length - 1]);
    Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
    if (panel != this.currentPanel)
    this.openPanel(panel);
    else
    this.closePanel();
    if (this.enableKeyboardNavigation)
    this.focus();
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    return false;
    Spry.Widget.Accordion.prototype.onFocus = function(e)
    this.hasFocus = true;
    this.addClassName(this.element, this.focusedClass);
    return false;
    Spry.Widget.Accordion.prototype.onBlur = function(e)
    this.hasFocus = false;
    this.removeClassName(this.element, this.focusedClass);
    return false;
    Spry.Widget.Accordion.KEY_UP = 38;
    Spry.Widget.Accordion.KEY_DOWN = 40;
    Spry.Widget.Accordion.prototype.onKeyDown = function(e)
    var key = e.keyCode;
    if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
    return true;
    var panels = this.getPanels();
    if (!panels || panels.length < 1)
    return false;
    var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
    var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
    while (nextPanel)
    if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
    break;
    nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
    if (nextPanel && currentPanel != nextPanel)
    this.openPanel(nextPanel);
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    return false;
    Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
    if (!panel)
    return;
    var tab = this.getPanelTab(panel);
    if (tab)
    var self = this;
    Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false);
    Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false);
    Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false);
    Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
    try
    if (element.addEventListener)
    element.addEventListener(eventType, handler, capture);
    else if (element.attachEvent)
    element.attachEvent("on" + eventType, handler);
    catch (e) {}
    Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
    var content = this.getPanelContent(panel);
    if (isDefault)
    this.currentPanel = panel;
    this.removeClassName(panel, this.closedClass);
    this.addClassName(panel, this.openClass);
    // Attempt to set up the height of the default panel. We don't want to
    // do any dynamic panel height calculations here because our accordion
    // or one of its parent containers may be display:none.
    if (content)
    if (this.useFixedPanelHeights)
    // We are in fixed panel height mode and the user passed in
    // a panel height for us to use.
    if (this.fixedPanelHeight)
    content.style.height = this.fixedPanelHeight + "px";
    else
    // We are in variable panel height mode, but since we can't
    // calculate the panel height here, we just set the height to
    // auto so that it expands to show all of its content.
    content.style.height = "auto";
    else
    this.removeClassName(panel, this.openClass);
    this.addClassName(panel, this.closedClass);
    if (content)
    content.style.height = "0px";
    content.style.display = "none";
    this.attachPanelHandlers(panel);
    Spry.Widget.Accordion.prototype.attachBehaviors = function()
    var panels = this.getPanels();
    for (var i = 0; i < panels.length; i++)
    this.initPanel(panels[i], i == this.defaultPanel);
    // Advanced keyboard navigation requires the tabindex attribute
    // on the top-level element.
    this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex"));
    if (this.enableKeyboardNavigation)
    var self = this;
    Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
    Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
    Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
    Spry.Widget.Accordion.prototype.getPanels = function()
    return this.getElementChildren(this.element);
    Spry.Widget.Accordion.prototype.getCurrentPanel = function()
    return this.currentPanel;
    Spry.Widget.Accordion.prototype.getPanelIndex = function(panel)
    var panels = this.getPanels();
    for( var i = 0 ; i < panels.length; i++ )
    if( panel == panels[i] )
    return i;
    return -1;
    Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
    return this.getPanelIndex(this.currentPanel);
    Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
    if (!panel)
    return null;
    return this.getElementChildren(panel)[0];
    Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
    if (!panel)
    return null;
    return this.getElementChildren(panel)[1];
    Spry.Widget.Accordion.prototype.getElementChildren = function(element)
    var children = [];
    var child = element.firstChild;
    while (child)
    if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
    children.push(child);
    child = child.nextSibling;
    return children;
    Spry.Widget.Accordion.prototype.focus = function()
    if (this.element && this.element.focus)
    this.element.focus();
    Spry.Widget.Accordion.prototype.blur = function()
    if (this.element && this.element.blur)
    this.element.blur();
    Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
    this.timer = null;
    this.interval = 0;
    this.fps = 60;
    this.duration = 500;
    this.startTime = 0;
    this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;
    this.onComplete = null;
    this.panel = panel;
    this.panelToOpen = accordion.getElement(panel);
    this.panelData = [];
    this.useFixedPanelHeights = accordion.useFixedPanelHeights;
    Spry.Widget.Accordion.setOptions(this, opts, true);
    this.interval = Math.floor(1000 / this.fps);
    // Set up the array of panels we want to animate.
    var panels = accordion.getPanels();
    for (var i = 0; i < panels.length; i++)
    var p = panels[i];
    var c = accordion.getPanelContent(p);
    if (c)
    var h = c.offsetHeight;
    if (h == undefined)
    h = 0;
    if (p == panel && h == 0)
    c.style.display = "block";
    if (p == panel || h > 0)
    var obj = new Object;
    obj.panel = p;
    obj.content = c;
    obj.fromHeight = h;
    obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
    obj.distance = obj.toHeight - obj.fromHeight;
    obj.overflow = c.style.overflow;
    this.panelData.push(obj);
    c.style.overflow = "hidden";
    c.style.height = h + "px";
    Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
    Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
    var self = this;
    this.startTime = (new Date).getTime();
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
    Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
    if (this.timer)
    clearTimeout(this.timer);
    // If we're killing the timer, restore the overflow
    // properties on the panels we were animating!
    for (i = 0; i < this.panelData.length; i++)
    obj = this.panelData[i];
    obj.content.style.overflow = obj.overflow;
    this.timer = null;
    Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
    var curTime = (new Date).getTime();
    var elapsedTime = curTime - this.startTime;
    var i, obj;
    if (elapsedTime >= this.duration)
    for (i = 0; i < this.panelData.length; i++)
    obj = this.panelData[i];
    if (obj.panel != this.panel)
    obj.content.style.display = "none";
    obj.content.style.height = "0px";
    obj.content.style.overflow = obj.overflow;
    obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto";
    if (this.onComplete)
    this.onComplete();
    return;
    for (i = 0; i < this.panelData.length; i++)
    obj = this.panelData[i];
    var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration);
    obj.content.style.height = ((ht < 0) ? 0 : ht) + "px";
    var self = this;
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
    })(); // EndSpryComponent
    I changed in the HTML code of the page with the accordion:
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" ><script src="SpryAssets/SpryAccordion.js"></script>
    <script src="SpryAssets/SpryURLUtils.js"></script><script>
    var params = Spry.Utils.getLocationParamsAsObject();
    </script>
    and at the end: <script type="text/javascript">
    *var Accordion1 = new Spry.Widget.Accordion("Accordion1");{defaultPanel:params.panel?params.panel:0});*
    </script>
    Is the problem that there are more than 9 panels?
    I don't know if you have enough patience to help me again?

  • "Can close all" option not working for content panel within accordion widget

    Hi. I can close an accordion menu by clicking the header but it won't close by clicking on the content panel itself (even though I have can close all selected in the flyout.) I've seen tutorials where it works but I can't replicate. Seems like a bug.
    Thanks for any ideas on how to fix or a workaround.
    I'm on the CC 2014.3 release. Mac OS 10.10.2
    P

    Hello,
    if you using OAW (Outlook AnyWhere) check the authentication method
    get-OutlookAnywhere -Identity "<Servername>xpv00645\RPC (Default Web Site)" | fl *AuthenticationMethod*
    I think it is set of NTLM or Negotiate.
    Outlook 2007 has negotiate
    problems at an OAW connection
    authentication.
    Change the authentication to NTLM for
    the internal and Basic for the extenal method.
    You need to reconfigure the Outlook Exhange settings to anonymous authentication and in the proxy settings to default authentication

  • Spry Accordion doesn't work properly

    I uploaded the site the other night and it worked out just fine. I made a change in some spacing between two words and added a letter to a word. Then all of the sudden it did not work on my next upload. The link to the page is http://www.tc.umn.edu/~aias/about.html#. I appreciate the time you put into solving this in advance!
    The code of the page:
    <!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>AIAS MN- About</title>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    a:link {
        color: #2E2F30;
        text-decoration: none;
    a:visited {
        text-decoration: none;
        color: #2E2F30;
    a:hover {
        text-decoration: none;
        color: #417EA9;
    a:active {
        text-decoration: none;
        color: #6DADD9;
    a {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    -->
    </style>
    <link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body onload="MM_preloadImages('images/AIASMN_btn_over.gif','images/About_btn_over.gif','images /Events_btn_over.gif','images/FBD_btn_over.gif','images/Media_btn_over.gif','images/Profes s_btn_over.gif','images/Links_btn_over.gif','images/Donate_btn_over.gif','images/membershi p_btnover.png','images/centerbox_topboard_hover.gif','images/holly_engle_hover.jpg','image s/kelsey_reinke_hover.jpg','images/sohpia_skemp_hover.jpg','images/leanna_kemp_hover.jpg', 'images/nate_mckewon_hover.jpg','images/kamren_kubesh_hover.jpg','images/beau_sinchai_hove r.jpg')">
    <div class="styles">
      <div id="banner">
        <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="880" height="137">
          <param name="movie" value="banner_1.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object type="application/x-shockwave-flash" data="banner_1.swf" width="880" height="137">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="6.0.65.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
        <div id="main_nav"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aiasmn','','images/AIASMN_btn_over.gif',1)"><img src="images/AIASMN_btn.gif" name="aiasmn" width="93" height="43" border="0" id="aiasmn" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/About_btn_over.gif',1)"><img src="images/About_btn.gif" name="about" width="68" height="43" border="0" id="about" /></a><a href="events.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/Events_btn_over.gif',1)"><img src="images/Events_btn.gif" name="events" width="70" height="43" border="0" id="events" /></a><a href="fbd.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fbd','','images/FBD_btn_over.gif',1)"><img src="images/FBD_btn.gif" name="fbd" width="156" height="43" border="0" id="fbd" /></a><a href="media_v2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','images/Media_btn_over.gif',1)"><img src="images/Media_btn.gif" name="media" width="68" height="43" border="0" id="media" /></a><a href="profession.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('profession','','images/Profess_btn_over.gif',1)"><img src="images/Profess_btn.gif" name="profession" width="100" height="43" border="0" id="profession" /></a><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/Links_btn_over.gif',1)"><img src="images/Links_btn.gif" name="links" width="62" height="43" border="0" id="links" /></a><a href="donate.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('donate','','images/Donate_btn_over.gif',1)"><img src="images/Donate_btn.gif" name="donate" width="75" height="43" border="0" id="donate" /></a></div>
        <div class="container">
          <div class="leftside">
            <div class="leftbox">
              <div class="leftbox_top"><img src="images/leftbox_topnews.png" width="185" height="21" /></div>
              <div class="leftbox_body"><a href="http://www.aias.org/website/article.asp?id=897" target="_blank">Grassroots</a><br />
                <a href="t_shirt.html">T-Shirt Contest</a><br />
              <a href="http://forum.aias.org/" target="_blank">Forum</a></div>
              <div class="leftbox_bot"><img src="images/leftbox_bot.png" width="185" height="11" /></div>
            </div>
          </div> </div>
          <div class="rightside">
            <div id="meeting_date">
              <div id="meeting_text">9/14/11</div>
              <div id="membership"><a href="membership.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('membership','','images/membership_btnover.png',1)"><img src="images/membership_btn.png" name="membership" width="152" height="38" border="0" id="membership2" /></a></div>
              <div class="rightimage_links"><a href="http://www.aia-mn.org/" target="_blank"><img src="images/aiamsm.gif" width="152" height="35" border="0" /></a><a href="http://www.design.umn.edu/" target="_blank"><img src="images/cdes.gif" width="152" height="53" border="0" /></a><a href="http://www.aias.org/website/article.asp?id=8" target="_blank"><img src="images/aias.gif" width="152" height="56" border="0" /></a><a href="http://www.facebook.com/pages/American-Institute-of-Architecture-Students-MN-Chapter/11650 4105979" target="_blank"><img src="images/facebook.gif" width="152" height="48" border="0" /></a></div>
            </div>
          </div>
          <div class="centerbox">
            <div class="low_nav"><img src="images/lownav_blank2.gif" width="535" height="21" /></div>
            <div class="centerbox_container">
              <div class="centerbox_box">
                <div id="centerbox_top"><img src="images/centerbox_topabout.gif" width="532" height="27" /></div>
                <div id="centerbox_body">
                  <div id="centerbox_bodyinside">
                    <strong class="lg_titlefonts">AIAS-MN</strong><br />
                    AIAS  Minnesota is a student group at the University   of Minnesota for anyone  with an interest in Architecture. We hold   biweekly meetings where we  invite influential speakers to come and   inform us about issues  pertaining to architecture. We also attend local   events such as firm  crawls, participate in design charrettes, and use   our design skills to  help out community members in need through our   Freedom by Design team.  AIAS Minnesota is part of a national group that   holds regional &quot;quad&quot; conferences twice yearly, and a national &quot;forum&quot;   held every year, over  the weekend of New Year's Eve.<br />
                    <strong><br />
                    Mission:</strong>
                    <ul>
                    <li>To promote excellence in architecture education, training  and practice.</li>
                      <li>To foster an appreciation of architecture and related  disciplines.</li>
                      <li>To enrich communities in a spirit of collaboration.</li>
                      <li>To organize students and combine their efforts to advance  the art and science of architecture</li>
                    </ul>
                    <span class="lg_titlefonts"><strong>Freedom By Design</strong></span><strong><br />
                    </strong>Is the community service program for the AIAS Chapter at the University of  Minnesota. We are a registered student group at the university.<br />
                      <br />
                      <strong>What we Do:</strong><br />
    We utilizes our talents as design students to positively impact the lives of  people in our community in need through modest design and construction  solutions by addressing their struggles with thoughtful design solutions to  provide them with safety, dignity, and comfort. While we serve any community  members in the Twin Cities area in need, most of our work tends to deal with  accessibility and safety issues for our low-income and disabled neighbors.<br />
    <br />
    <strong>Priority:</strong><br />
    Our priority is improving the safety, dignity, and comfort of our community  neighbors' living, learning, working, and playing environments through design.<br />
    <br />
    <strong>Group Members:</strong><br />
    Any students (from any discipline) that are interested in positively enhancing  the lives of their Twin Cities neighbors and community members are encouraged  to join Freedom by Design and AIAS.               
    <span class="invis_text">.</span>               
                 </div>
                </div>
                <div class="centerbox_bot"><img src="images/centerbox_bot3.png" width="532" height="21" /></div>
              </div>
            <div class="centerbox_box">
              <div id="Accordion1" class="Accordion" tabindex="0">
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','images/centerbox_topboard_hover.gif',1)"><img src="images/centerbox_topboard.gif" name="Image20" width="532" height="32" border="0" id="Image20" /></a></div>
                  <div class="AccordionPanelContent"></div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/holly_engle_hover.jpg',1)"><img src="images/holly_engle.jpg" name="Image21" width="530" height="70" border="0" id="Image21" /></a></div>
                  <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                    Major/Minor: </strong>Bachelor of Science, Architecture/Sustainability, Psychology<br />
                    <strong>Year in school:</strong> Senior<br />
                    <strong>Hometown:</strong> Sauk Centre, MN<br />
                    <strong>I enjoy: </strong>Architecture. Coffee. Food. Long walks on the beach. Books. Travel. Sleep. Tennis.<br />
                    <strong>Best AIAS memory: </strong>I have too many. My best memories are yet to come because we're going to   Cincinnati (Fall Quad), Phoenix (Forum), and Detroit (Spring Quad) this   year!</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','images/kelsey_reinke_hover.jpg',1)"><img src="images/kelsey_reinke.jpg" name="Image22" width="530" height="70" border="0" id="Image22" /></a></div>
                  <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                    Major/Minor: </strong>Bachelor of Design in Architecture/Spanish and Environmental Design<br />
                    <strong>Year in school:</strong> Senior<br />
                    <strong>Hometown: </strong>Stillwater, MN (go ponies?)<br />
                    <strong>I enjoy: </strong>Coffee, kayaking, MN summer/fall, architecture, art, reading, dog-stalking at Calhoun, finding cool spots, and coffee.<br />
                  <strong>Best AIAS memory:</strong> the masquerade ball from FORUM in Minneapolis 2010.  And more to come this year!!</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','images/sohpia_skemp_hover.jpg',1)"><img src="images/sohpia_skemp.jpg" name="Image23" width="530" height="70" border="0" id="Image23" /></a></div>
                  <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                    Major/Minor: </strong>Bachelor of Science, Architecture/Environmental Design<br />
                    <strong>Year in school:</strong> Senior<br />
                    <strong>Hometown: </strong>Minneapolis, MN<br />
                    <strong>I enjoy:</strong> Lake Harriet, Lake Calhoun, running, coffee, family, friends, and of course architecture.<br />
                  <strong>Best AIAS memory:</strong> New Years at McNamara.</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','images/leanna_kemp_hover.jpg',1)"><img src="images/leanna_kemp_.jpg" name="Image24" width="530" height="70" border="0" id="Image24" /></a></div>
                  <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                    Major/Minor: </strong>Bachelor of Design in Architecture/Theatre Design<br />
                    <strong>Year in school:</strong> Senior<br />
                    <strong>Hometown: </strong>Wausau, WI<br />
                    <strong>I enjoy: </strong>Painting<br />
                  <strong>Best AIAS memory:</strong> New Years Eve masquerade at FORUM with AIAS!</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','images/nate_mckewon_hover.jpg',1)"><img src="images/nate_mckewon.jpg" name="Image25" width="530" height="70" border="0" id="Image25" /></a></div>
                  <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                    Major/Minor: </strong>Architecture/Environmental Design<br />
                    <strong>Year in school:</strong> Sophomore<br />
                    <strong>Hometown: </strong>North Sioux City, SD<br />
                    <strong>I enjoy:</strong> Running, golfing, meeting new people, spontaneous activities, and the little things in life.<br />
                  <strong>Best AIAS memory:</strong> 2011 spring quad trip to carbondale, IL.</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','images/kamren_kubesh_hover.jpg',1)"><img src="images/kamren_kubesh.jpg" name="Image26" width="530" height="70" border="0" id="Image26" /></a></div>
                  <div class="AccordionPanelContent"><strong>Contact:</strong> [email protected]<br />
                    <strong>Major/Minor: </strong>Bachelor of Design in Architecture/Environmental Design<br />
                      <strong>Year in school:</strong> Junior<br />
                      <strong>Hometown:</strong> St. Cloud, MN<br />
                      <strong>I enjoy:</strong> Design, Architecture, Rowing, Soccer, Soccer, and other outdoor activities.<br />
                    <strong>Best AIAS memory:</strong> Spring Quad at Carbondale!</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','images/beau_sinchai_hover.jpg',1)"><img src="images/beau_sinchai_.jpg" name="Image27" width="530" height="70" border="0" id="Image27" /></a></div>
                  <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                    Major/Minor: </strong>Bachelor of Design in Architecture/Arts<br />
                    <strong>Year in school:</strong> Junior<br />
                    <strong>Hometown:</strong> Trat, Thailand<br />
                    <strong>I enjoy:</strong> Trying new food<br />
                  <strong>Best AIAS memory:</strong> Decorating cookie with my AIAS mentor, Joel, during the first AIAS mentor/mentee meeting. Our cookie won the third place.</div>
                </div>
              </div>
              <div class="Accordion"><img src="images/centerbox_bot4.jpg" width="532" height="21" /></div>
            </div>
            </div><div class="bottom_nav">
              <p> </p>
              <p><a href="index.html">AIASMN</a> | <a href="about.html">About</a> | <a href="events.html">Events</a> | <a href="fbd.html">Freedom By Design</a> | <a href="media.html">Media</a> | <a href="profession.html">Profession</a> | <a href="links.html">Links</a> | <a href="donate.html">Donate</a></p>
            </div>
          </div>
      </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    swfobject.registerObject("FlashID");
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>

    Let me put it another way.
    open the page in FF
    right-click within the document and choose View Page Source
    in the pop-up window, click ../SpryAssets/SpryAccordion.js
    You will see
    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
    <HTML><HEAD>
    <TITLE>404 Not Found</TITLE>
    </HEAD><BODY>
    <H1>Not Found</H1>
    The requested URL /SpryAssets/SpryAccordion.js was not found on this server.<P>
    <HR>
    <ADDRESS>Apache/1.3.37 Server at www.tc.umn.edu Port 80</ADDRESS>
    </BODY></HTML>
    This means that the document cannot be found.
    I could also put it another way by translating ../SpryAssets/SpryAccordion.js as http://www.tc.umn.edu/SpryAssets/SpryAccordion.js
    click on the latter and see what happens
    now click on http://www.tc.umn.edu/~aias/SpryAssets/SpryAccordion.js
    Gramps

  • How do I make my accordion spry not "jump" or "hiccup" in IE??

    Ok, sorry you guys, I'm a newbie.
    It seems that no matter what I do, I can't get the accordion to co-operate with Internet Explorer. It has always jumped when tabs are clicked and then settles down. It's rather irritating and I would like to fix it. I've run out of things to try. Can anyone help?
    In addition, with attempts to make keep the accordion and background centered I used a div with the position centered, which worked, but only in FF and Chrome. In IE it stays far left. When I had it in a table, I could set a left: px in the class, but never figured out how to center it with a table so it would change position based on the monitor resolution. If there's a better way to do this that IE and other browsers like, please help me. If it's just IE that has the problem is there any way to make it like my code?
    If you can help me change the height of the accordion, that would be great. It seems it doesn't want to stretch out, but maybe I'm writing it in the wrong section or the wrong way.
    Another minor issue is the IE not doing the transparency I set on the tabs. I heard that they took that feature out. Is that true or is there a way to set it for IE?
    Here's what I have so far:
    +<!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>Bonnie Praymayer</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    p.MsoNormal {
    margin-top:0cm;
    margin-right:0cm;
    margin-bottom:10.0pt;
    margin-left:0cm;
    line-height:115%;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";
    -->
    </style>
    </head>
    <body>
    <table id="big">
        <tr>
         <td><table width="200" border="1" id="table" name="table">
           <tr>
             <td><div id="Accordion1" class="Accordion" tabindex="0">
               <div class="AccordionPanel">
                 <div class="AccordionPanelTab">
                 <span class="tabContent">Benefiting People Like You
                 </span>
                 </div>
                 <div class="AccordionPanelContent">
                       <div class="panelContent">
                     <p >I specialize in deep tissue massage. As you may know  already, massage therapy is the manipulation of soft tissue with the goal to  improve well-being and heal injuries. It can involve just about any part of the  body, but generally most people have stiffness and injuries in the back and  neck. I enjoy using this type of health maintenance to assist people like you.  Massage therapy can be used to improve many ailments such as:</p>
                     <p >Muscle Strains, Sprains, Headaches, Migraines, Fibromyalgia,  Edema, and High Blood Pressure</p>
                     <p >Beyond &quot;ailments&quot; massage is excellent for  treating sore muscles in pregnant women as well as reducing stress in everyone.</p>
                     <p > </p>
                   </div>
                 </div>
               </div>
               <div class="AccordionPanel">
                 <div class="AccordionPanelTab">
                     <span class="tabContent"> Reflexology - An Added Benefit
                     </span>
                 </div>
                 <div class="AccordionPanelContent">
                   <div class="panelContent"><p >In addition to massage therapy, I am certified to practice  Reflexology of the feet. This is a therapy wherein pressure is applied to the  feet to encourage the body to heal itself. It's as if the feet are a map to the  body with the spine being the edge of what is known as the arch. There are key  points such as the heart and lungs, sinuses, kidneys, and intestinal tract. </p>
                   <p> </p>Reflexology has been known to also be an indicator to hidden  health issues. Many reflexologists can attest to the fact that upon finding  sore areas in the feet, the corresponding organ(s) have later been discovered  by a physician to be injured or diseased. It is not a replacement for  healthcare, but for some, reflexology has proven to be an asset to gain  knowledge of the workings of their body.<p></p>
                   <p >One thing to note: if you do receive a reflexology treatment it is normal to feel a  little dizzy, fatigued, or flu-like if you don't hydrate yourself before and  after.</p>
                </div>
                 </div>
               </div>
               <div class="AccordionPanel">
                 <div class="AccordionPanelTab">
                         <span class="tabContent"> How to Choose a Therapist
                         </span>
                 </div>
                 <div class="AccordionPanelContent">
                   <div class="panelContent"><p >To be honest, everyone has preferences for what he or she  like in a massage, so there is no hard and fast rule. What I recommend is that  you decide what you need treated whether it be muscle strain, stiff muscles,  stress, poor circulation etc. You can decide what kind of massage you need  based on what you decide you want massage to do for you.</p>
                   <p >If you need to de-stress, relax and do not have many sore  stiff muscles then simple relaxation massage would be good for you. If you have  a constant sore shoulder or neck then you really need a therapist that is  capable of effectively loosening those fibres.</p>
                   <p >You may be able to determine if a therapist is right for you  by talking with someone who has had a massage from that person. Otherwise, you  can sometimes judge by the type of facility in which they are practicing.  Typically a spa is going to give you strictly relaxation, although many  therapists are capable of more if you request it. A chiropractor's clinic will  often focus on rehabilitation of injured patients; more often than not they  have massage therapists that are more than capable of working deep enough to  affect injured tissue.></p>
                   <p > Communication is the  key when it comes to during the treatment in order to customize and optimize  your massage experience. Don't be afraid to speak up if you need to adjust the technique or pressure. After all, the massage is all about you!</p></div><p></p>
                 </div>
               </div>
               <div class="AccordionPanel">
                 <div class="AccordionPanelTab"><span class="tabContent">My Practice</span></div>
                 <div class="AccordionPanelContent">
                     <div class="panelContent">
                   <p>My interest in massage therapy began at a very early age. Although I didn't know it was an actual profession, I started massaging at the age of 8 as I did my best to alievinate my mother's chronic pain from fibromyalgia. I, through time gained a natrual feel for detecting prolblem areas in the muscle and I learned what pressure is appropriate. </p>
                   <p>I took my training in 2006 at the Alberta Insitute of Massage for six months to earn a certificate for a 1100 hour program. Though short, it was intensive in the anatomy and physiology portion and very hands-on in the massage classes. It was my privilege to learn from three instructors who had more than 10 years experience as massage therapists and many years teaching it.</p>
                   <p>Since my training, I have had the opporutinty to work as a massage therapist for 3 years. I have treated people from all walks of life for countless ailments and injuries. It is my pleasure to do my utmost to see to it that each paitent recieves the treament they deserve and expect.</p>
                   </div>
                 </div>
               </div>
             </div></td>
           </tr>
         </table></td>
        </tr>
    </table>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>
    @charset "utf-8";
    /* CSS Document */
    body {
        background-image:url(../Images/WaterLeaf_Exp.png);
        background-repeat: no-repeat;
        background-position:center;
        background-attachment:scroll;
        background-color:#222222;
    .panelContent {
        color: #dcd2d2;
        font-size: 14px;
        font-family: Verdana, Geneva, sans-serif;
        margin-left: 15px;
        margin-top: 20px;
    .tabContent {
        color: #333;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: #000;
        padding: 15px;
    #big {
        /*background-image*/
        background-repeat:no-repeat;
        border: none;
        top: 0px;
        margin-left: 23.5%;
        position: static;
        height: 800px;
        width: 955px;
    #table {
        width: 700px;
        height: 290px;
        /*margin-top: 1%;
        margin-left: 125px;*/
        border: none;
        position: relative;
        z-index: 2;
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.4 - 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 {
        border-left: solid 1px gray;
        border-right: solid 1px black;
        border-bottom: solid 1px gray;
        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 {
        background-color: #FFF;
        /*border-top: solid 1px black;*/
        border-bottom: solid 1px gray;
        margin: 0px;
        padding: 2px;
        cursor: pointer;
        -moz-user-select: none;
        -khtml-user-select: none;
        filter:alpha(opacity= 30);
        opacity: 0.3;
        -moz-opacity:0.3;
    /* 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;
    /* 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: #cccccc;*/
    /* 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: #93C;
        filter:alpha(opacity= 50);
        opacity: 0.5;
        -moz-opacity:0.5;
    .AccordionPanelOpen .AccordionPanelTabHover {
        color: #cccccc;
        filter:alpha(opacity= 30);
        opacity: 0.3;
        -moz-opacity:0.3;
    /* 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:hover {
        background-color: #FFF;
        filter:alpha(opacity= 20);
        opacity: 0.2;
        -moz-opacity:0.2;
    .AccorrdionPanelOpen:hover {
        filter:alpha(opacity= 90);
        opacity: 0.9;
        -moz-opacity:0.9;
        color:#F00
    .AccordionPanelOpen .AccordionPanelTab {
        background-color: #390;
        filter:alpha(opacity= 30);
        opacity: 0.3;
        -moz-opacity:0.3;

    You would make this a little easier if you posted a link to the page.
    Most of the jump seems to be some extra padding or margin between the tabs  when you rollover, but I am not able to find it.  Is there any other css that is governing this page? I did remove a couple of <p></p> set of tags you had  and it improved the jump, but it is still there.
    If the page is live, run it through the validator http://validator.w3.org/ , fix whatever errors it finds, if you still have the jump, post a link to the page and the issue might get found.
    Gary

  • Spry Accordion gains scroll bars in IE7

    Can anyone suggest a fix for a problem I've encountered on a
    spry accordion? The accordion has eight panels, each containing an
    image. Each image has a hot spot linking the image on that
    particular accordion panel to another web page. When I view in
    different browsers, FF and IE6 look fine and work fine. When viewed
    in IE7, each of the panels has scroll bars on the bottom and right
    side, as if the image is too large.
    What is causing the scroll bars to appear only in IE7?
    Thanks!

    Same problem here too. Also, I can't get a Spry horizontal
    menu bar to center within the accordion. As with the extra spacing
    glitch, it looks fine in everything except IE7. Is IE still the
    browser of choice these days? I don't use it, but I do try to get
    things to look correct in it.
    Thanks

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

Maybe you are looking for

  • Why does Mozilla open when I open a Tiff file in Photoshop?

    Ever since I started using Photoshop CS5 in 64-bit, I noticed that every time I double click to open a .TIFF file in Bridge, Firefox opens and puts the image file name in the address bar. Photoshop continues to open also, but why is Firefox opening?

  • VZ Messages - unknown error and low res pictures

    I just installed VZ Messages on my iPhone 5 with IOS8. The app shows an "unknown error" message that doesn't seem to have any effect but it's hard to tell. What is this? Also, all of the pictures I receive are low quality. In the native IOS message a

  • Converting Microsoft dpm Replica and RP volumes into Virtual Tape Format

    Hello All,  We need to migrate protected data-source that is from P3000 to D We purchased a HP Storeonce 2700  backup device and it does not support iSCSI disk. It support iSCSI tape, that is iscsi connection to Virtual Tape library.  The problem is

  • Settings for "doc status" and "doc type" view

    Hi experts, Can you kindly give me any info about the place where i can set the view of document status and document type? Actually, when i create a document, the system show me both the attribute value and the status description. For the display of

  • New itunes 11 not working on my pc

    after install new itunes 11, my pc shows: MSVCR80.dll can not found, so i have no itunes to use sysc my phone, and can not re load older version of itune i used to have, what i should do now