Operation Manual

410

USING DREAMWEAVER

Building Spry pages visually

Last updated 3/28/2012

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.

For a quick reference on changing the colors of the Collapsible Panel widget, see David Powers’s Quick guide to styling

Spry tabbed panels, accordions, and collapsible panels.

For a more advanced list of styling tasks, see www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom.

All CSS rules in the topics below refer to the default rules located in the SpryCollapsiblePanel.css file. Dreamweaver

saves the SpryCollapsiblePanel.css file in the SpryAssets folder of your site whenever you create a Spry Collapsible

Panel widget. This file also contains useful commented information about various styles that apply to the widget.

While you can easily edit rules for the Collapsible Panel widget directly in the accompanying CSS file, you can also

use the CSS Styles panel to edit the collapsible panel’s CSS. The CSS Styles panel is helpful for locating the CSS classes

assigned to different parts of the widget, especially if you use the panel’s Current mode.