
3
Set properties
Select the Spry Collapsible Panel
in your web page and use the
Property Inspector (Window >
Properties) to set its properties.
Give the widget an instance
name to easily identify it in your
code, and set the Default State
to Closed. This will show the panel
collapsed when you view the
page. You can enable animation
to show the panel opening and
closing when the user interacts
with the panel. For convenience
while authoring, the Display
setting lets you see the panel
open or closed.
4
Preview and test
Use File > Preview in Browser
to test the collapsible panel.
Clicking on the title bar will now
toggle the panel open and closed,
involving your page readers with
interactive content.
Efficiently designed pages that provide key material quickly,
and can allow readers to follow additional content, are critical.
A good way to involve your readers is to supply interactive
content. Spry user interface widgets accomplish both of these
goals quickly and easily. For example, you can add a collapsible
menu that will show or hide content based on user interaction.
Setting properties for the Spry Collapsible Panel
Testing the Spry Collapsible Panel
Dreamweaver
+ Design Edition
125