Dreamweaver CS5: The Missing Manual

Accordions

A Spry Accordion is another space-saving widget that lets you stuff lots of content into a multi-paneled display (Figure 13-5). Like Spry Tabbed Panels, a Spry Accordion contains panels of information, each with a labeled tab. But in this case, a web browser stacks the tabs on top of each other instead of side by side. When you click the tab of a panel that’s not currently visible, that panel rises with a smooth animated effect. In addition, you must set each panel’s height, so if the content inside a panel is taller than the panel itself, a browser adds a scroll bar to the panel’s right edge. It’s kind of like having a browser window inside a browser window. Dreamweaver’s stock style sheet sets the height of each panel to 200 pixels, but you can change that (see the bullet point “Panels” on Formatting a Spry Accordion).

Figure 13-5. Accordion panels must have a set height, so you always know how much room they take up on a page. A web browser automatically adds scrollbars to panels that have lots of content. The content in this image doesn’t fit within the height of the panel, so a visitor has to use the small scroll bar to read all the information. Depending on how you look at it, the additional scroll bar provides a great space-saving device or an annoying inconvenience that forces visitors to scroll unnecessarily.

Adding an Accordion

You can place a Spry Accordion anywhere ...