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

Similar Messages

Strange issue with Spry Accordion Panels

Hi, I'm having some strange issues with the Spry Accordion
Panels.
Here is the page:
http://www.bellaclientcenter.com/browncollege/aboutus.html
For some reason when I preview this message it adds extra
characters to the url above, so just delete those off to see the
correct url.
The only browser this does NOT happen in is safari, I'm
seeing it all of my other browsers. You'll notice when you first
load up the page, you'll see that the active panel header
background is green, and the non active is a dark grey. But when
you click one of the other panels they all turn a strange neon blue
color. This is very apparent in firefox.
Any thoughts on this? I've attached the spry css code in case
the problem is there.
thanks so much!!
Jeff

That is because your page is currently invalid. And renders in IE quirksmode..
<base href="http://www.industrialwebsearch.com/">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So make sure your page is valid, and the animations will go smooth in ie

SPRY accordion widget IE8 ONLY issue

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

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

A simple Spry Accordion Question (I think)

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

</script>
</body>
</html>
JAVASCRIPT
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
    this.element = this.getElement(element);
    this.defaultPanel = 0;
    this.hoverClass = "AccordionPanelTabHover";
    this.openClass = "AccordionPanelOpen";
    this.closedClass = "AccordionPanelClosed";
    this.focusedClass = "AccordionFocused";
    this.enableAnimation = true;
    this.enableKeyboardNavigation = true;
    this.currentPanel = null;
    this.animator = null;
    this.hasFocus = null;
    this.duration = 500;
    this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
    this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
    this.useFixedPanelHeights = true;
    this.fixedPanelHeight = 0;
    Spry.Widget.Accordion.setOptions(this, opts, true);
    // Unfortunately in some browsers like Safari, the Stylesheets our
    // page depends on may not have been loaded at the time we are called.
    // This means we have to defer attaching our behaviors until after the
    // onload event fires, since some of our behaviors rely on dimensions
    // specified in the CSS.
    if (Spry.Widget.Accordion.onloadDidFire)
        this.attachBehaviors();
    else
        Spry.Widget.Accordion.loadQueue.push(this);
Spry.Widget.Accordion.onloadDidFire = false;
Spry.Widget.Accordion.loadQueue = [];
Spry.Widget.Accordion.addLoadListener = function(handler)
    if (typeof window.addEventListener != 'undefined')
        window.addEventListener('load', handler, false);
    else if (typeof document.addEventListener != 'undefined')
        document.addEventListener('load', handler, false);
    else if (typeof window.attachEvent != 'undefined')
        window.attachEvent('onload', handler);
Spry.Widget.Accordion.processLoadQueue = function(handler)
    Spry.Widget.Accordion.onloadDidFire = true;
    var q = Spry.Widget.Accordion.loadQueue;
    var qlen = q.length;
    for (var i = 0; i < qlen; i++)
        q[i].attachBehaviors();
Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
Spry.Widget.Accordion.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
        return document.getElementById(ele);
    return ele;
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
        return;
    ele.className += (ele.className ? " " : "") + className;
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
        return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
        return;
    for (var optionName in optionsObj)
        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
            continue;
        obj[optionName] = optionsObj[optionName];
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(panel)
    if (panel)
        this.addClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
    if (panel)
        this.removeClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.openPanel = function(panel)
    var panelA = this.currentPanel;
    var panelB = panel;
    if (!panelB || panelA == panelB)
        return;
    var contentA;
    if( panelA )
        contentA = this.getPanelContent(panelA);
    var contentB = this.getPanelContent(panelB);
    if (! contentB)
        return;
    if (this.useFixedPanelHeights && !this.fixedPanelHeight)
        this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
    if (this.enableAnimation)
        if (this.animator)
            this.animator.stop();
        this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration });
        this.animator.start();
    else
        if(contentA)
            contentA.style.height = "0px";
        contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
    if(panelA)
        this.removeClassName(panelA, this.openClass);
        this.addClassName(panelA, this.closedClass);
    this.removeClassName(panelB, this.closedClass);
    this.addClassName(panelB, this.openClass);
    this.currentPanel = panelB;
Spry.Widget.Accordion.prototype.openNextPanel = function()
    var panels = this.getPanels();
    var curPanelIndex = this.getCurrentPanelIndex();
    if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
        this.openPanel(panels[curPanelIndex+1]);
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
    var panels = this.getPanels();
    var curPanelIndex = this.getCurrentPanelIndex();
    if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
        this.openPanel(panels[curPanelIndex-1]);
Spry.Widget.Accordion.prototype.openFirstPanel = function()
    var panels = this.getPanels();
    if( panels )
        this.openPanel(panels[0]);
Spry.Widget.Accordion.prototype.openLastPanel = function()
    var panels = this.getPanels();
    if( panels )
        this.openPanel(panels[panels.length-1]);
Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
    // if (this.enableKeyboardNavigation)
    //     this.element.focus();
    if (panel != this.currentPanel)
        this.openPanel(panel);
    this.focus();
Spry.Widget.Accordion.prototype.onFocus = function(e)
    // this.element.focus();
    this.hasFocus = true;
    this.addClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.prototype.onBlur = function(e)
    // this.element.blur();
    this.hasFocus = false;
    this.removeClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
    var key = e.keyCode;
    if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
        return true;
    var panels = this.getPanels();
    if (!panels || panels.length < 1)
        return false;
    var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
    var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
    while (nextPanel)
        if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
            break;
        nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
    if (nextPanel && currentPanel != nextPanel)
        this.openPanel(nextPanel);
    if (e.stopPropagation)
        e.stopPropagation();
    if (e.preventDefault)
        e.preventDefault();
    return false;
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
    if (!panel)
        return;
    var tab = this.getPanelTab(panel);
    if (tab)
        var self = this;
        Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
        Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
        Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(panel); }, false);
Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture)
    try
        if (element.addEventListener)
            element.addEventListener(eventType, handler, capture);
        else if (element.attachEvent)
            element.attachEvent("on" + eventType, handler);
    catch (e) {}
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
    var content = this.getPanelContent(panel);
    if (isDefault)
        this.currentPanel = panel;
        this.removeClassName(panel, this.closedClass);
        this.addClassName(panel, this.openClass);
    else
        this.removeClassName(panel, this.openClass);
        this.addClassName(panel, this.closedClass);
        content.style.height = "0px";
    this.attachPanelHandlers(panel);
Spry.Widget.Accordion.prototype.attachBehaviors = function()
    var panels = this.getPanels();
    for (var i = 0; i < panels.length; i++)
        this.initPanel(panels[i], i == this.defaultPanel);
    if (this.enableKeyboardNavigation)
        // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
        // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
        // by default.
        var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
        // if (!tabIndexAttr) this.element.tabindex = 0;
        if (tabIndexAttr)
            var self = this;
            Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
            Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
            Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
Spry.Widget.Accordion.prototype.getPanels = function()
    return this.getElementChildren(this.element);
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
    return this.currentPanel;
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
    var panels = this.getPanels();
    for( var i = 0 ; i < panels.length; i++ )
        if( this.currentPanel == panels[i] )
            return i;
    return 0;
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
    if (!panel)
        return null;
    return this.getElementChildren(panel)[0];
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
    if (!panel)
        return null;
    return this.getElementChildren(panel)[1];
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
    var children = [];
    var child = element.firstChild;
    while (child)
        if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
            children.push(child);
        child = child.nextSibling;
    return children;
Spry.Widget.Accordion.prototype.focus = function()
    if (this.element && this.element.focus)
        this.element.focus();
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
    this.timer = null;
    this.interval = 0;
    this.stepCount = 0;
    this.fps = 0;
    this.steps = 10;
    this.duration = 500;
    this.onComplete = null;
    this.panel = panel;
    this.panelToOpen = accordion.getElement(panel);
    this.panelData = [];
    Spry.Widget.Accordion.setOptions(this, opts, true);
    // If caller specified speed in terms of frames per second,
    // convert them into steps.
    if (this.fps > 0)
        this.interval = Math.floor(1000 / this.fps);
        this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
    else if (this.steps > 0)
        this.interval = this.duration / this.steps;
    // Set up the array of panels we want to animate.
    var panels = accordion.getPanels();
    for (var i = 0; i < panels.length; i++)
        var p = panels[i];
        var c = accordion.getPanelContent(p);
        if (c)
            var h = c.offsetHeight;
            if (h == undefined)
                h = 0;
            if (p == panel || h > 0)
                var obj = new Object;
                obj.panel = p;
                obj.content = c;
                obj.fromHeight = h;
                obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
                obj.increment = (obj.toHeight - obj.fromHeight) / this.steps;
                obj.overflow = c.style.overflow;
                this.panelData.push(obj);
                c.style.overflow = "hidden";
                c.style.height = h + "px";
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
    var self = this;
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
    if (this.timer)
        clearTimeout(this.timer);
        // If we're killing the timer, restore the overflow
        // properties on the panels we were animating!
        if (this.stepCount < this.steps)
            for (i = 0; i < this.panelData.length; i++)
                obj = this.panelData[i];
                obj.content.style.overflow = obj.overflow;
    this.timer = null;
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
    ++this.stepCount;
    this.animate();
    if (this.stepCount < this.steps)
        this.start();
    else if (this.onComplete)
        this.onComplete();
Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
    var i, obj;
    if (this.stepCount >= this.steps)
        for (i = 0; i < this.panelData.length; i++)
            obj = this.panelData[i];
            if (obj.panel != this.panel)
                obj.content.style.height = "0px";
            obj.content.style.overflow = obj.overflow;
            obj.content.style.height = obj.toHeight + "px";
    else
        for (i = 0; i < this.panelData.length; i++)
            obj = this.panelData[i];
            obj.fromHeight += obj.increment;
            obj.content.style.height = obj.fromHeight + "px";

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

Spry Accordion(or Template?) error

I did some validation to one of several pages that occasionally have problems when I update the Master template page to my site(they look like this: http://njsustainingfarms.rutgers.edu/agclass1.html) , and the one error I got was for something in my spry accordion menu(which seems to be working fine):
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
It's telling my contentA is null.
Now, I know next to nothing about javascript, so I am pretty much stumped on how to resolve this.
The one other thing I should note is that in design view, it shows that I have a duplicate head region(which is also editable except for the tags), but that is not so in the master template page.
Any help would be much appreciated, as i've been battling with this issue for some time, and i'd like to try to figure it out once and for all.
P.S.- I'd offer to attach the .dwt file, but I can't seem to find out how to do that on this forum.

codeOutsideHTMLIsLocked="false" -->
That says that anything outside of that area can't be modified, right?
Nope. It says anything outside that area is editable, i.e., it's treated as an editable region. This is the default behavior for a DW template and it allows you to place server scripting or javascript code above the <html> tag, or below the </html> tag in any child page.
Unless you are using server scripting, or are very advanced in your use of DW, you should never mess with this default setting.

Spry accordion subpage troubles

Hello all,
I used DW CS4 to set up a spry accordion for my site (www.apposite.us) navigation menu. I was able to change some of its behaviors and appearance and am mostly satisfied, but I have two lasting issues:
1. I want the 'Home' tab to share the style and behavior of the rest of the accordion, but since it does not have any content, DW seems to interpret it as 'broken' and refuses to return the index page upon selection. I tried to fix the issue by defining an empty content panel, which fixes the 'broken' issue, but the change messes up spacing relative to the rest of the menu.
2. I want a particular panel to remain open upon selection of its content (right now, the panel reverts to collapsed when a content page is opened). I found a solution that involves working with several templates, but I would like to avoid this if at all possible.
Any suggestions on either improving the function of this accordion or setting up the menu more effectively using a different method would be greatly appreciated.
Jane

Sorry, my followup message should read:
Hi Gramps,
Your suggestion for part one of my problem worked (thank you!), but I am still having problems implementing part two.
As it is currently constructed, all pages are set up with the same template, which includes
var Accordion1 = new Spry.Widget.Accordion("MenuLabels", { useFixedPanelHeights: false });
in its code. Is there a way to make any selected content return its parent panel? Or is there a way to make an editable code region within the template (I have tried but not succeeded in doing this)? If the code you suggested
var Accordion1 = new Spry.Widget.Accordion("MenuLabels", { defaultPanel: 2, useFixedPanelHeights: false });
must be added to each linked content page, how do I achieve this without divorcing it from the template?
Thanks again,
Jane

Spry Accordion Problem in IE7

Hi,
I have created a Spry Accordion containing 7 sections, using CS4. It works perfectly in Firefox, however there is a strange bug in IE7. The top section requires the scrollbar and this is working ok. However, the other 6 sections all have the same problem (btw, none of these other 6 are needing the scrollbar as the text does not fill the content area) - the bottom line of text in each of the 6 other accordion sections is not displayed. All the other text in the 6 sections is ok (other than the fact that the top margin is non-existent - I assume that can be fixed fairly easily)
Has anyone else had this problem, and are there any know fixes?
many thanks for any help offered

Since the answer to your question requires some knowledge of Spry, you might want to post it in the Spry forum. Be prepared to post a URL to the problem page, if asked.
Mark A. Boyd
Keep-On-Learnin' :-)

Firefox Spry Accordion widget

Firefox Spry Accordion widget
Hello, I am trying to use Spry Accordion widget. When I click one of the other panels they all turn a strange neon blue color. Anyone know of any fixes?
The below is the index page and below that is SpryAccordion.css
index
<!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>Conferences</title>
<script src="SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outside">
<div id="outsideone">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">
<p>Content ssss</p>
<p>lkajsdfl</p>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>

<div id="photo"></div>
<div id="contentholder">
<div id="contentsone"> <div id="moreone">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
</div> <div id="insidecontentsone"></div></div>
<div id="lineone"> </div>
<div id="contentstwo"> <div id="moretwo">
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
</div>
<div id="insidecontentstwo"></div></div>
<div id="linetwo"> </div>
<div id="contentsthree"> <div id="morethree">
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
</div><div id="insidecontentsthree"></div></div>
</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 1 });
var Accordion2 = new Spry.Widget.Accordion("Accordion2", { defaultPanel: 1 });
var Accordion3 = new Spry.Widget.Accordion("Accordion3", { defaultPanel: 1 });
</script>
</body>
</html>
SpryAccordion.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;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-right-color: none;
border-bottom-color: none;
border-left-color: none;
background-image: url(white.png);
background-color: none;
border-top-style: none;
/* 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-image: url(white.png);
/* 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: #CCCCCC;
border-top: solid 1px black;
border-bottom: solid 0px gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(white.png);
/* 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-image: url(white.png);
/* 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: #none;
background-image: url(white.png);
/* 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: #555555;
background-image: url(white.png);
.AccordionPanelOpen .AccordionPanelTabHover {
color: none;
background-image: url(white.png);
/* 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: none;
background-image: url(white.png);
/* 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: none;
height: 15px;
background-image: url(white.png);
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
background-image: url(white.png);
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
background-image: url(white.png);

Welcome to the Forum!
If you can upload your page to a server and give us a link, we will be able to look at your page in action. Just seeing the code is not enough.
Is this the first time you have used an Accordion? It is probable that the bright neon blue you are seeing is the default style, which you can change in the CSS file. I believe it was designed that color to highlight the feature you want to change .
Take a look in the Accordion's CSS file (it will show as an associated file at the top of your document window) for color rules, and adjust them to suit your palette (and your palate!). Check out the CSS Styles Panel (use Current mode) for a handy way to know what you are looking at. Click on the Accordion in Design View and the rules will be highlighted in the CSS Styles Panel. (Click the right-hand stair-step icon to see the style cascade.)
Beth

How to make no panels on Spry accordion open by default?

I have a Spry Accordion with several panels. I want the default behavior for none of the panels to be opened until one is clicked. Currently the default behavior is for the first panel to be automatically expanded when the page is first visited. How do I correct this?

It's here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
Under the sub heading "starting with all panels closed".
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
Martin

Incontext Editing: Spry Accordion

Editing content in Dreamweaver's Spry Accordion is distorting the functionality of the widget (Version 1.61.) Can this be fixed?

Hello chandra111,
Please elaborate on the behavior you're seeing with the Spry widget and InContext Editing. Can you provide steps the recreate the problem?
Also, please make sure you're using InContext Editing and the Spry widget according to the following tutorial: http://www.adobe.com/devnet/dreamweaver/articles/spry_dynamic_dw_site.html
The fourth page of the tutorial specifically discusses working with the Spry Accordian: http://www.adobe.com/devnet/dreamweaver/articles/spry_dynamic_dw_site_04.html
Best regards,
Corey

Strange behavior when "trying" to burn a disk.

At least I think this is strange behavior, following the instructions in the help viewer, topic "Backing up your music to a CD or DVD." One thing for sure, it's not burning a disc and it ain't telling me why.
I select the playlist and click "Burn Disc"
Requests a blank disc. I insert one.
Message "checking media"
after about a minute, the disc ejects
Message "checking media" displays another 30 seconds
No other messages displayed.
What the ??? Shouldn't it at least display an error message??
Super-Drive information..... from System Profiler
MATSHITA DVD-R UJ-845C:
Firmware Revision: DPP9
Interconnect: ATAPI
Burn Support: Yes (Apple Shipped/Supported)
Cache: 2048 KB
Reads DVD: Yes
CD-Write: -R, -RW
DVD-Write: -R, -RW, +R, +RW
Burn Underrun Protection CD: Yes
Burn Underrun Protection DVD: Yes
Write Strategies: CD-TAO, CD-SAO, DVD-DAO
Media: No
Using Sony DVD+R discs.
Mac Mini Mac OS X (10.4.8)

Whoops, sorry, this was while burning a playlist.
I've also tried some Pleomax CD disks (Samsung), with no luck. I've tried burning directly from iTunes, and from Toast 7.
Of the types I've tried, the Sony DVD's have been the best for me. Haven't tried many types though. Maybe I can get disks one at a time until I find a brand my burner likes.
Still, isn't it strange that there is NO error message? It just quits?
Mac Mini Mac OS X (10.4.8)

Spry: Accordion does not close properly

Hi Everyone,
I am very new to web design, so bear with me please.
I created a new website using Dreamweaver and added a spry accordion to use as a menu. it seemed to be working fine, but as I was adding links into the boxes it quit working on me. I have thoughts of restarting, but I thought that you may be able to help me here as well. The link to the website is http://www.blakesprairiefair.com/2009.html
I used images for the tab titles and they should all be uploaded, I shoud haver 5 tabs in the accordion but it only shows one   I am attaching how it looked a few keystrokes ago. I can't figure out why it is acting so oddly
If you need more from me let me know,
Thank you so much for any help
Chuck

Hey, Thanks for the tip. I looked through the code like 5 times and I can't seem to find any unclosed or extra Divs I attached the code below in case that helps.
I got the code for the defaultPanel: -1 from http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0E55F588-24EC-4dd3-9508-82132 4E7F133.html
- Still haven't found the error
Thanks
Chuck
<!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>
<link href="_css/NewWebpage.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<div id="UpperLeftSpacing"></div>
<div id="UpperRightTitle"></div>
<div id="LowerLeft4NavBar">
    <div id="NavBar">
      <div id="SmallerNavBar">
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Home.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><em><a href="http://www.blakesprairiefair.com">Home</a></em></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Events.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
            <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm">Events Schedule</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm"></a></p>
              <p><em><strong>Friday Night :</br>
              <br>     <a href="http://www.blakesprairiefair.com/index_files/DemoDerby.htm">Demo Derby</a></strong></em><em><strong></em></p>
              <p><em><strong>Saturday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/JudgingSchedule.htm">Judging</a></strong></em></br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/CombineDemoDerby2009.htm">Combine Derby</a></em></p>
              <p><em><strong>Sunday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/TractorPull.htm">Tractor Pull</a></em></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Docs.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p><em><strong><a href="http://www.blakesprairiefair.com/2009FairBook.pdf">09 Fair Book (pdf)</a></strong></em></p>
              <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/Page396.htm">09 Documents</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/Page396.htm"></a></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Contact.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 5</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Links.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 6</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Past.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p>2007</p>
              <p>2008</p>
            </div>
          </div>
</div>
        <div id="Cover">
          <p align="center"><img src="2009Cover.jpg" width="185" height="302" /></br>
          <br>Cover Designed By:</br>
          <br>Andrea Pagenkopf</br>
          <br>Rolling Rockets 4-H</p>
        </div>
      </div>
    </div>
</div>
<div id="MainContentBox">
    <div id="BoxForText">
      <p align="center">Welcome to the new</p>
      <p align="center"><strong>Blake's Prairie Jr. Fair </strong></p>
      <p align="center">Webpage</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>News:</u></em></strong></p>
      <p align="center"><em>Buttons for 2009 are on sale now! </em></p>
      <p align="center"><em>Visit local businesses or contact your local 4-H Club or FFA </em>Chapter to purchase one today.</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>Updates:</u></em></strong></p>
      <p align="left"><em>7/10/2009</em> - New Homepage</p>
      <p align="left"><em>5/20/2009</em> - <a href="http://www.blakesprairiefair.com/2009FairBook.pdf">2009 Fair Book</a> Added to Site</p>
    </div>
</div>
<div id="BottomBox"></div>

</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Spry Accordion - Tabs open and then close after page loads

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

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

Well to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
    if (panel != this.currentPanel)
        this.openPanel(panel);
    else
        this.closePanel();
    if (this.enableKeyboardNavigation)
        this.focus();
//    if (e.preventDefault) e.preventDefault();
//    else e.returnValue = false;
//    if (e.stopPropagation) e.stopPropagation();
//    else e.cancelBubble = true;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions

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

Strange Behavior with gMSA in Server 2012 R2

Greetings,
I have been doing some testing with gMSA Accounts in a Server 2012 R2 environment (two separate environments, actually), and I have noticed something very strange that occurred in both environments, which does not appear to be occurring in one of our customer's
self-managed environments.
We created a Group Managed Service Account using the following article:
http://blogs.technet.com/b/askpfeplat/archive/2012/12/17/windows-server-2012-group-managed-service-accounts.aspx
Everything went smoothly, and the account installs/tests successfully on both of the hosts that we are testing on. I am able to set my services to run under the account, and most of them appear to work fine. I am having some issues with a few of my services,
and I believe that the strange behavior I am seeing may have something to do with this - described below:
As soon as I set the service's Log On Account (via the Log On Tab under the Service's Properties), the entirety of the "Log On" tab changes to "greyed out," and I am unable to change the Log On account back via the GUI (Screenshot
attached).
I found that I am able to successfully change the account via Command Line using sc.exe, but the Log On tab remains greyed out! So far, I have found nothing to remedy this, but confirmed that it happens for any service I set to use the gMSA as the Logon
Account, and that it happens in 2 separate test environments, but not in a Customer's production environment - very strange.
All servers in this environment are running Server 2012 R2, and domain Functional Level is currently Server 2012.
I have been unable to find any information online about this behavior, so I am hoping someone has seen this before, and can explain why this is happening.
Nick

VIvian,
Yes, we used the Install-AdServiceAccount gMSA command on each host using the gMSA account, and then ran Test-AdServiceAccount gMSA, which returned "True."
However, one thing I noticed is that if I run Test-ADServiceAccount gMSA as a Local Administrator, it fails with the following:
PS C:\Users\Administrator> Test-AdServiceAccount gMSA$
Test-AdServiceAccount : The server has rejected the client credentials.
At line:1 char:1
+ Test-AdServiceAccount gMSA$
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : SecurityError: (:) [Test-ADServiceAccount], AuthenticationException
    + FullyQualifiedErrorId : ActiveDirectoryCmdlet:System.Security.Authentication.AuthenticationException,Microsoft.A
   ctiveDirectory.Management.Commands.TestADServiceAccount
If I run Test-ADServiceAccount gMSA as Domain Administrator, it returns true:
PS C:\Users\Administrator.<domainname>> Test-AdServiceAccount gMSA$
True
Is this normal?
Overall, I think the issue I am running into is at the Application Level, and not a problem with the gMSA, as it appears to be working. (Can Start/Stop services without any issues). I will be investigating my issue further with 3rd-party vendors, unless
you think there is something wrong with my gMSA accounts based on the information I have provided.
Nick

Strange behavior of Spry Accordion in IE

Similar Messages

Maybe you are looking for