Working with the spry collapsible panel widget – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 298
Working with the Spry Collapsible Panel widget
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 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
.
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.
291