O'Reilly logo

Designing Web Interfaces by Theresa Neil, Bill Scott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Expand/Collapse

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.

Considerations

There are some issues to keep in mind when using Expand and Collapse.

Expand/Collapse Inlays

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).[40]

Yahoo! Bookmarks uses Expand/Collapse to hide and show its edit panel for editing bookmark tags (Figure 11-5).

image with no caption
image with no caption
Yahoo! Bookmarks expands and collapses the "Edit" panel in place with the page

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.

Tip

Use Expand ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required