Note:

Spry widgets are replaced with jQuery widgets in Dreamweaver CC and later. While you can still modify existing spry widgets on your page, you cannot add new spry widgets.

About the Accordion widget

An Accordion widget is a set of collapsible panels that can store a large amount of content in a compact space. Site visitors hide or reveal the content stored in the accordion by clicking the tab of the panel. The panels of the accordion expand or contract accordingly as the visitor clicks different tabs. In an accordion, only one content panel is open and visible at a given time. The following example shows an Accordion widget, with the first panel expanded:

Accordion widget
Accordion widget

A. Accordion panel tab B. Accordion panel content C. Accordion panel (open) 

The default HTML for the Accordion widget comprises an outer div tag that contains all of the panels, a div tag for each panel, and a header div and content div within the tag for each panel. An Accordion widget can contain any number of individual panels. The HTML for the Accordion widget also includes script tags in the head of the document and after the accordion’s HTML markup.

For a more comprehensive explanation of how the Accordion widget works, including a full anatomy of the Accordion widget’s code, see www.adobe.com/go/learn_dw_spryaccordion.

For a tutorial on working with the Accordion widget, see www.adobe.com/go/vid0167.

Insert and edit the Accordion widget

Insert the Accordion widget

  • Select Insert > Spry > Spry Accordion.

Note:

You can also insert an Accordion widget by using the Spry category in the Insert panel.

Add a panel to an Accordion widget

  1. Select an Accordion widget in the Document window.
  2. Click the Panels Plus (+) button in the Property inspector (Window > Properties).
  3. (Optional) Change the name of the panel by selecting the panel’s text in Design view and altering the text.

Delete a panel from an Accordion widget

  1. Select an Accordion widget in the Document window.
  2. In the Panels menu of the Property inspector (Window > Properties), select the name of the panel to delete, and click the Minus (-) button.

Open a panel for editing

  • Do one of the following:
    • Move the mouse pointer over the tab of the panel to open it in Design view, and click the eye icon that appears at the right of the tab.

    • Select an Accordion widget in the Document window, and then click the name of the panel to edit it in the Panels menu of the Property inspector (Window > Properties).

Change the order of panels

  1. Select an Accordion widget in the Document window.
  2. In the Property inspector (Window > Properties), select the name of the Accordion panel you want to move.
  3. Click the up or down arrows to move the panel up or down.

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.

Note:

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.

    Note:

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

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy