Spry

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 widget behaviors (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.

  1. Open the SpryAccordion.css file.
  2. 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.
  3. 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.

  1. Locate the .Accordion CSS rule in the SpryAccordion.css file. This rule defines properties for the main container element of the Accordion widget.
  2. 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.

  1. Locate the .AccordionPanelContent CSS rule in the SpryAccordion.css file.
  2. 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.

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

  2. 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("Accordion2", { 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 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("Accordion5", { 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 (0.5 seconds).

 Add the duration option to the constructor: 
<script type="text/javascript">
	var acc9 = new Spry.Widget.Accordion("Accordion9", { duration: 1000 });
</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("Accordion7", { 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.

You can also specify a panel height in the Accordion constructor, rather than in the CSS, by using the fixedPanelHeight constructor option. The value for the fixedPanelHeight constructor option should be an integer that specifies the height of the panel in pixels.

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