It's helpful to have additional content or other panels hidden until the user needs them. This is accomplished by using Expand and Collapse to control a panel's visibility in the flow of the page.
There are some issues to keep in mind when using Expand and Collapse.
In Chapter 5 we discussed Inlays. A typical way to bring an Inlay into a page is with Expand/Collapse transitions.
When these panels are shown, providing an animated transition for expanding the panel open or collapsing the panel closed helps connect the panel to the control that activates it. Expand is visually more eye-catching than Brighten/Dim (because the movement is more dramatic than reducing color slightly).
Yahoo! Bookmarks uses Expand/Collapse to hide and show its edit panel for editing bookmark tags (Figure 11-5).
Figure 11-5. Yahoo! Bookmarks expands and collapses the "Edit" panel in place with the page
While the same result could have been accomplished with a normal Overlay, the Expand in context makes it apparent that it is connected to the "Edit" button as well as applied to the content. By making it inline, the context is preserved and not hidden.
Use Expand ...