Accordions, Tables & Tabs
Tabs and accordions organize and simplify a large amount of related content.
Accordions are most appropriate when readers only need a few key pieces of information on the page. At least 3 is a good number. Here’s some good examples of accordions used for FAQs, distinct parts of a program, and stages of a doctor visit. Refrain from using accordions just to shorten the length of a page, since readers may gloss over the content inside.
Tabs should only be used for a few chunks of related content, between 3 and 5. They help keep all information on the same place on the page.
Accordions and Usability
Please consider potential usability issues with accordions, outlined in this great article by the Nielson Norman Group.
Accordion Group
Accordion titles should be brief
Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Avoid using all caps
You can organize text in accordions with headings and lists if needed:
- Phasellus gravida semper nisi. Nullam vel sem.
- Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit.
- Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
At least 3 accordions is recommended
Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Tab Group
Very Short Tab Title
Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus donec quam.
Just a Few Words
Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Between 3 and 5
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus donec quam.Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.
Table Section
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
|---|---|---|
| Row 2, Column 1 | Row 2, |
Row 2, Column 3 |
Row 3, Column 1  |
Row 3, Column 2 | Row 3, Column 3 |