Customize the Accordion widget



Although the Property inspector enables you to make simple edits to an Accordion widget, it does not support customized styling tasks. You can alter the CSS rules for the Accordion widget and create an accordion that is styled to your liking.

For a quick reference on changing the colors of the Accordion widget, see David Powers’s Quick guide to styling Spry tabbed panels, accordions, and collapsible panels.

For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_spryaccordion_custom.

All CSS rules in the following topics refer to the default rules located in the SpryAccordion.css file. Dreamweaver saves the SpryAccordion.css file in the SpryAssets folder of your site whenever you create a Spry Accordion widget. This file also contains commented information about various styles that apply to the widget, so you might find it helpful to consult the file as well.

Although you can easily edit rules for the Accordion widget directly in the CSS file, you can also use the CSS Styles panel to edit the accordion’s CSS. The CSS Styles panel is helpful for locating the CSS classes assigned to different parts of the widget, especially if you use the panel’s Current mode.

Style Accordion widget text

You can style the text of an Accordion widget by setting properties for the entire Accordion widget container, or by setting 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, 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

 To change the background colors of different parts of an Accordion widget, use the following table to locate the appropriate CSS rule, 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. You can constrain the width of an Accordion widget, however, by setting a width property for the accordion container.

  1. Locate the .Accordion CSS rule by opening up the SpryAccordion.css file. This is the rule that defines properties for the main container element of the Accordion widget.
    You can also locate the rule by selecting the Accordion widget, and looking in the CSS Styles panel (Window > CSS Styles). Make sure the panel is set to Current mode.
  2. Add a width property and value to the rule, for example width: 300px;.