Expand & Collapse

The Expand and Collapse pattern shows and hides content on demand. This pattern can be used when screen real estate is really important. There are a few common methods for how this is done.

In addition there are panels that show or hide, but usually described in other patterns or components (i.e. drawers, split views, keyboards, full dialogs, etc...).

Appearance

Appearance characteristics for this pattern.

Accordion

Menu

Reveal

Behavior

Common behaviors for this pattern.

Usage

Usage guidelines for this pattern.

Related

Fig 1. More Link

 

Fig 2. Card Flip

 

Fig 3. Swipe to Reveal

 

Fig 4. Accordion