Adobe Dreamweaver CS3 - Manual (Page 466)

DREAMWEAVER CS3
User Guide
459
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 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 bar.
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.
A B
September 4, 2007