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 second panel expanded:

View full size graphic

A.

Accordian panel tab

B.

Accordian panel content

C.

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