Operation Manual

Working with the Spry Collapsible Panel widget
To the top
To the top
To the top
About the Collapsible Panel widget
Insert and edit the Collapsible Panel widget
Customize the Collapsible Panel widget
About the Collapsible Panel widget
A Collapsible Panel widget is a panel that can store content in a compact space. Users hide or reveal the content stored in the Collapsible Panel
by clicking the tab of the widget. The following example shows a Collapsible Panel widget, expanded and collapsed:
A. Expanded B. Collapsed
The HTML for the Collapsible Panel widget comprises an outer div tag that contains the content div tag and the tab container div tag. The HTML
for the Collapsible Panel widget also includes script tags in the head of the document and after the Collapsible Panel’s HTML markup.
For a more comprehensive explanation of how the Collapsible Panel widget works, including a full anatomy of the Collapsible Panel widget’s code,
see www.adobe.com/go/learn_dw_sprycollapsiblepanel.
Insert and edit the Collapsible Panel widget
Insert the Collapsible Panel widget
Select Insert > Spry > Spry Collapsible Panel.
Note: You can also insert a Collapsible Panel widget by using the Spry category in the Insert panel.
Open or close the Collapsible Panel in Design view
Do one of the following:
Move the mouse pointer over the tab of the panel in Design view and click the eye icon that appears at the right of the tab.
Select a Collapsible Panel widget in the Document window, and then select Open or Closed from the Display pop-up menu in
the Property inspector (Window > Properties).
Set the default state of a Collapsible Panel widget
You can set the default state (open or closed) of the Collapsible Panel widget when the web page loads in a browser.
1. Select a Collapsible Panel widget in the Document window.
2. In the Property inspector (Window > Properties), select Open or Closed from the Default state pop-up menu.
Enable or disable animation for the Collapsible Panel widget
By default, when you enable animation for a Collapsible Panel widget, the panel gradually and smoothly opens and closes when the site visitor
clicks the panel’s tab. If you disable animation, the collapsible panel snaps open and closed abruptly.
1. Select a Collapsible Panel widget in the Document window.
2. In the Property inspector (Window > Properties), select or deselect Enable Animation.
Customize the Collapsible Panel widget
Although the Property inspector enables you to make simple edits to a Collapsible Panel widget, it does not support customized styling tasks. You
can alter the CSS for the Collapsible Panel widget and create a collapsible panel that is styled to your liking.
236