Customize the Accordion widget

The SpryAccordion.css file provides the default styling for the Accordion widget. You can, however, easily customize the widget by changing the appropriate CSS. The CSS rules in the SpryAccordion.css file use the same class names as the related elements in the accordion’s HTML code, so it’s easy for you to know which CSS rules correspond to the different sections of the Accordion widget. Additionally, the SpryAccordion.css file contains class names for behaviors that are related to the widget (for example, hovering and clicking behaviors).

The SpryAccordion.css file should already be included in your website before you start customizing. For more information, see Prepare your files.

Note: Internet Explorer up to and including version 6 does not support sibling and child contextual selectors (for example, .AccordionPanel + .AccordionPanel or .Accordion > .AccordionPanel).

Style an Accordion widget (general instructions)

Set properties for the entire Accordion widget container, or set properties for the components of the widget individually.

Open the SpryAccordion.css file.
Locate the CSS rule for the part of the accordion to change. For example, to change the background color of the accordion’s tabs, edit the AccordionPanelTab rule in the SpryAccordion.css file.
Make your changes to the CSS and save the file.

You can replace style-related class names in the SpryAccordion.css file and HTML code with class names of your own. Doing so does not affect the functionality of the widget.

The SpryAccordion.css file contains extensive comments, explaining the code and the purpose for certain rules. For further information, see the comments in the file.

Style Accordion widget text

Set properties for the entire Accordion widget container, or set properties for the components of the widget individually.

To change the text styling of an Accordion widget, use the following table to locate the appropriate CSS rule in the SpryAccordion.css file, and then add your own text styling properties and values.

Text to change	Relevant CSS rule	Example of properties and values to add
Text in the entire accordion (includes both tab and content panel)	.Accordion or .AccordionPanel	font: Arial; font-size:medium;
Text in accordion panel tabs only	.AccordionPanelTab	font: Arial; font-size:medium;
Text in accordion content panels only	.AccordionPanelContent	font: Arial; font-size:medium;

Change Accordion widget background colors

Use the following table to locate the appropriate CSS rule in the SpryAccordion.css file, and then add or change background color properties and values.

Part of widget to change	Relevant CSS rule	Example of property and value to add or change
Background color of accordion panel tabs	.AccordionPanelTab	background-color: #CCCCCC; (This is the default value.)
Background color of accordion content panels	.AccordionPanelContent	background-color: #CCCCCC;
Background color of the open accordion panel	.AccordionPanelOpen .AccordionPanelTab	background-color: #EEEEEE; (This is the default value.)
Background color of panel tabs on hover	.AccordionPanelTabHover	color: #555555; (This is the default value.)
Background color of open panel tab on hover	.AccordionPanelOpen .AccordionPanelTabHover	color: #555555; (This is the default value.)

Constrain the width of an accordion

By default, the Accordion widget expands to fill available space. To constrain the width of an Accordion widget, set a width property for the accordion container.

Locate the .Accordion CSS rule in the SpryAccordion.css file. This rule defines properties for the main container element of the Accordion widget.
Add a width property and value to the rule, for example width: 300px;.

Change accordion panel height

By default, the height of Accordion widget panels is set to 200 pixels. To change the height of panels, change the height property in the .AccordionPanelContent rule.

Locate the .AccordionPanelContent CSS rule in the SpryAccordion.css file.
Change the height property to a dimension of your choosing.

Note: Always set this value to ensure that accordion panel sizes are the same.

Change accordion panel behaviors

The Accordion widget includes some predefined behaviors. These behaviors consist of changing CSS classes when a particular event occurs. For example, when a mouse pointer hovers over an accordion panel tab, Spry applies the AccordionPanelTabHover class to the widget. (This behavior is similar to a:hover for links.) The behaviors are blank by default; to change them, add properties and values to the rules.

Open the SpryAccordion.css file and locate the CSS rule for the accordion behavior to change. The Accordion widget includes four built-in rules for behaviors.

Behavior	Description
.AccordionPanelTabHover	Activates when hovering over the panel tab
.AccordionPanelOpen	Activates on the tab of the open panel
.AccordionPanelClosed	Activates on the closed panels
.AccordionFocused	Activates when the entire accordion gets focus.

For examples, see the Accordion sample file located in the samples directory of the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

Add CSS rules for any of the behaviors you want to enable.

Note: You cannot replace behavior-related class names in the SpryAccordion.css file with class names of your own because the behaviors are hard coded as part of the Spry framework. To override the default class with your class names, send the new values as arguments to the accordion constructor, as the following example shows:

<script type="text/javascript">
	var acc2 = new Spry.Widget.Accordion("Acc2", { hoverClass: "hover", openClass: "open", closedClass: "closed", focusedClass: "focused" });
</script>

Turn off panel animation

By default, accordion panels use animation to smoothly open and close. You can turn this animation off, however, so that the panels instantly open and close.

To turn off animation, send an argument in the accordion constructor, as follows:

<script type="text/javascript">
	var acc5 = new Spry.Widget.Accordion("Acc5", { enableAnimation: false });
</script>

Set panel animation timing

You can change the time it takes for a panel to open. Set the time in milliseconds (1000 = 1 second). By default, Spry uses 500 milliseconds.

Add the duration option to the constructor:

<script type="text/javascript">
	var acc9 = new Spry.Widget.Accordion("Acc9", { duration: 100 });
</script>

Set variable panel heights

By default, when animation is enabled, Spry forces all accordion content panels to use the same height. Spry derives this height from the height of the default open panel of the accordion, which is determined by CSS or by the height of the content in the panel.

The accordion also supports variable height panels. To turn this support on, pass a useFixedPanelHeights: false option to the accordion's constructor.

Pass a useFixedPanelHeights:false option as follows:

<script type="text/javascript">
	var acc7 = new Spry.Widget.Accordion("Acc7", { useFixedPanelHeights: false });
</script>

For an example, see the Accordion sample file located in the samples directory of the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files.

To have Spry set the panel height to a set value in JavaScript (rather than CSS code), pass the fixedPanelHeight option that programatically sets the content panel heights. Pixels are used for this option.

<script type="text/javascript">
	var acc7 = new Spry.Widget.Accordion("Acc7", { fixedPanelHeight: "300px" });
</script>

Comments

buddyq said on May 15, 2007 at 7:16 PM :

I copy and pasted this and it just holds all my panels open at the same time with no animation. I am also using nested accordions.

Instructions aren't clear if we are supposed to change the {"acc7"... to be what our accordions are labeled? Will it work by just copying and pasting? Please clarify.

ricavery said on May 16, 2007 at 7:29 AM :

The useFixedPanelHeights:false option does not work when passed as described in the Doc page.
Rather, change this.useFixedPanelHeights = true; to false in the SpryAccordion.js file.

No screen name said on May 19, 2007 at 6:31 PM :

The fixedPanelHeights:"400px" does not work,why?

mikecron said on May 21, 2007 at 12:27 PM :

While ricavery's method may work (I have not tested it), the published Adobe documentation works fine for me in Firefox 2 and IE7.

Be sure to remove the CSS height attribute, otherwise your accordion panel will be a fixed height when the page finishes loading, only collapsing to its variable height after you click one of the panels.

No screen name said on Jun 14, 2007 at 3:45 PM :

To get the fixedPanelHeight to work,
I removed px after the number required and VOILA.
exemple : var Accordion1 = new Spry.Widget.Accordion("Accordion1", { fixedPanelHeight: "80", defaultPanel: -1 });

jonmichael said on Jun 22, 2007 at 1:41 PM :

To all Spry users:

Please note that you might get a faster (and better) response to your query if you post it on the Spry forum at:

http://www.adobe.com/go/labs_spry_pr1_forum

The Spry forum is a place where the entire Spry community can chime in and help you solve your problem.

Thanks,

Jon Michael Varese
Adobe Systems, Inc.

TommyLogic said on Jul 11, 2007 at 9:53 AM :

I'm looking for a way to close an accordion panel. I have it set to close all at page load, but i need a way to add a closing link preferably to the panel tab or link from within the open panel.

jonmichael said on Jul 11, 2007 at 1:43 PM :

Dreamweaver ships with Spry 1.4, we added the ability to close *all* accordion panels, in Spry 1.5, if you put it in variable height mode.

You can see an example of an accordion in variable height mode and an example of how to start closed here:

http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePanelHeights

In variable height mode a 2nd click on an open tab will cause the panel to close.

In the future, try posting Spry queries or issues on the forum:

http://www.adobe.com/go/labs_spry_pr1_forum

You may get faster responses/help from folks in the community as well as from Adobe folks who watch/participate in the forum.

No screen name said on Dec 31, 2007 at 6:56 AM :

Programmatic control of the Spry accordion DOES NOT WORK in Spry 1.4. Updated to Spry 1.6 and the same code works fine.

Current page: http://livedocs.adobe.com/en_US/Spry/1.4/WS64B8DA6B-42EA-48bf-A64A-E8D36073C00B.html