Dreamweaver CS6: The Missing Manual

Accordions

The Spry Accordion widget is another space-saving widget that lets you stuff lots of content into a multi-paneled display (Figure 13-4). Like Spry tabbed panels, a Spry accordion contains panels of information, each with a labeled tab. But in this case, a 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 and exposes the content “underneath.” In addition, you must set each panel’s height, so if the content is taller than the panel itself, the 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-4. You have to specify a height for Accordion panels, so you always know how much room they take up on a page. A web browser automatically adds scroll bars 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 way to present a lot of content in a little space or an annoying inconvenience that forces visitors to scroll. ...