Dreamweaver CS5: The Missing Manual

Collapsible Panels

A Spry Collapsible Panel is like an accordion panel, except that it consists of just a single tab-and-panel pair (see Figure 13-8). The tab toggles the panel’s display; each click of the tab either opens or closes the panel. You decide whether the panel is opened or closed when the web page first loads. A closed collapsible panel is great for keeping information out of a visitor’s face until she wants it—like a form for signing up for an email newsletter, or driving directions to your business. Add an opened panel to your page when you want to make an important announcement that, once read, can be quickly hidden with a click of the mouse.

Adding a Collapsible Panel

You can place a Spry Collapsible Panel anywhere on a web page—on an empty page, inside a <div> tag, and so on.

1. In the document window, click the place you wish to insert the collapsible panel.

   For example, inside a <div> tag.

2. Choose Insert→Spry→Spry Collapsible Panel, or, on the Insert panel, click one of the Spry Collapsible Panel buttons (see Figure 13-2).

   After you insert a panel, you see a tab in the document window labeled “Tab”, and an open panel labeled “Content”; in addition, a blue Spry tab appears above the top tab, and the Property inspector displays the properties for the collapsible panel (Figure 13-9).

3. In the Property inspector, name the collapsible panel.

   As with Spry Tabbed Panels, this step is optional (see step 3 on Adding a Tabbed Panel).

   Figure 13-8. Collapsible panels work especially well ...