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
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.