Manualshelf

Operation Manual

ManualsBrandsAdobe ManualsSoftwareDreamweaver CS6
231232233234235236237238239240
Working with the Spry Accordion widget
To the top
To the top
About the Accordion widget
Insert and edit the Accordion widget
Customize the Accordion widget
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:
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
233