Excerpts from the O'Reilly book,
public discussion, and new patterns.
Buy the book

Closable Panels

Dreamweaver MX
What:	Put sections of content onto separate panels, and let the user open and close each of them separately from the others.
Use when:	There's too much stuff to present on the page, but you want it all only one click away. The content is divisible into clearly-named sections, as with Titled Sections and Card Stack. Specifically, this is a useful concrete implementation of Extras On Demand. If you've organized your content this way, you may want to use some form of Closable Panel to hold those extras.
Why:	You would use Closable Panels in many of the same places you might use a Card Stack -- it's a space-saving device that depends on a user clicking it to get at it. However, Closable Panels gives you a little more flexibility: It can contain sections of wildly differing sizes. If you used a Card Stack with sections of various sizes, the smaller sections would have large areas of white space, which is awkward. The user can open several sections at once. That's especially nice in authoring tools, and for "power users" of all kinds of complex applications -- at the user's discretion, they can simultaneously open many panels and keep them in view at the same time. If you create only one closable panel and embed it in a larger page or dialog box, that panel looks less important than the content it's embedded in. If you put both sections into two tab pages, however, they appear to be of equal importance. There is a cost to using these panels. Tab pages are well understood by most people, but Closable Panels are not as common -- they won't be familiar to everyone at first. Usability testing is recommended. Furthermore, the ability to open many sections at once may backfire by making the environment too cluttered and unusable.
How:	Divide your content into sections, name them appropriately, and put them into panels that appear and disappear when you click a button or link. Put an arrow, triangle, or chevron (">>") on that button or link -- doing so hints to the user that something will open or close. In many applications, the triangle points down to the open panel when open, and to the right when closed; these are sometimes termed "twist-downs." In most applications where you use this device, the window containing the Closable Panel(s) grows and shrinks as the panel is opened and closed. You might also (or additionally) put it in a scrolling panel, or into resizable panes, as is done in the Dreamweaver example at the top of this pattern. Also note the use of a Card Stack nested inside a Closable Panel. You can use it if you have a very large number of sections to deal with, and if they fit into a two-level hierarchical organization (e.g., the "Design" section contains subsections named "CSS Styles," "HTML Styles," and "Behaviors"). This technique has been in use since at least 1993, and possibly earlier. The Motif-based GUI builder called UIM/X used closable panels -- even with the twist-down arrows -- for its widget palettes.
Examples:
From http://visualthesaurus.com Thinkmap's Visual Thesaurus is a web application that uses Closable Panels. The colored titlebars delineate four sections that you can turn on and off at will, via the On/Off radio buttons. You can also drag the titlebars to resize the sections. The user gets more control over what he sees on the interface -- if the four sections make it too cluttered, he can turn off the least relevant ones.
From Visual Studio Visual Studio's property sheets use Closable Panels to categorize its numerous properties by topic. A user who isn't interested in the Accessibility or Appearance properties, for instance, can close them up while she concentrates on the other properties. Instead of a triangle, Visual Studio uses pluses-in-squares, just like the Windows treeview control. Even though this isn't a treeview, it takes advantage of what users already know: you click on the plus to open something, and click on the minus to close it.