DEMO Accordion

Overview

Accordions hide content into blocks you can open and close. They help can help simplify content and help users scan several topics at once.

When to use accordions

You have an FAQ page with many types of questions.
You need users to view a lot of related content on the same page.
Information in each accordion has the same level and priority.

How they work

One or more accordions can be open at a time.
An accordion group has an optional heading and intro. The heading can be an H2 or H3 depending on where they are in your page structure.
Each accordion has a title and a text area for content.
NOTE: you cannot put other components like buttons or cards in an accordion.

Do’s and Don’ts

DO use at least 2 accordions.
DO use clear headings that are easy to read/scan.
DON’T make accordion content overly long. This can make the whole page too information-dense.
DON’T use accordions for the whole page. FAQ pages can be an exception, but typically you want to separate accordions into clear sections.

This is an optional heading with intro text below

Intro text above accordions lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Accordion with text and an inline image

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Accordion with bullets

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
- Is simply dummy text of the printing and typesetting industry.
- Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Another accordion group that just uses a heading

This accordion uses just text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Another accordion with small amount of text and links

Inline link lorem

Another link

Alternatives to Accordions

There are some alternatives to accordions depending on your content. Also, this accordion group uses the optional H2 heading and intro text

Multiple Columns

If you have a small amount of content planned for each accordion, and you don’t have many, consider using a multicolumn layout that reveals all that information together.

Learn more about multicolumn content

Tabs

If there is one group of info that should absolutely be read first, tabs can be a good option, since the first tab’s content is always visible. However, tabs are best uses for just a few sections of content, and labels need to be short and concise.

Learn more about tabs

Cards

If your accordions will all include links, also consider using cards. These are designed to link to other content, have options for imagery, and look great in a group.

Learn more about cards