Bard College at Simon's Rock: the Early College
  1. Home
  2. Guide
  3. Patterns
  4. Layout
  5. Accordion

Accordion

Present a quick overview with the option to a dig a little deeper.

For text heavy content, use the snippet accordion.

You can only have one accordion on a webpage. Add and subtract elements by adding or deleting rows.
The accordion pattern is a good way to showcase several information options. Users can easily see several titles and then click to reveal more. The revealed information should be limited to a couple of paragraphs. If the content is longer, the additional content titles will be hidden off-screen, preventing the user from easily scanning. If content is longer, consider moving it onto it's own page or breaking it up into smaller sections.
The accordion pattern is not set up to contain other patterns. Links, lists, and images may display in less than optimal ways.