Accordions, Pills and Tabs

Purpose

To improve content organization by dividing related content into sections - users can view the sections one at a time, or just view what they are interested in rather than looking through multiple paragraphs. It also saves screen real estate.

Tabs and pills

• Tabs can be used if you only have two or three sections. At the point where they wrap, they should turn into pills.
• Keep labels for pills and tabs to 1-2 words whenever possible

Example of tabs

• Item 1
• Item 2
• Item 3

Example of pills

• Item 1
• Item 2
• Item 3

Accordions

• 5-6 accordions are generally the maximum for one page; if more than that, consider alternate formatting, such as multiple pages (the UX team can help)
• Content should be relatively short (one or two paragraphs of text; a bulleted list)
• Too many accordions/too much content hurts SEO. The search engines don't know what's most important.
• Accordion names should also err on the side of clarity instead of brevity. They are often found in groups of 3 or more, so their labels should be sufficiently descriptive so that users who are browsing can quickly differentiate between them to find the information they're seeking. The below example is 18 words, but clearly conveys a question that many, many of our customers have:
  I need to use my health plan, but I don’t have my ID card. What should I do? 
• Avoid having numerous accordions in question format, especially those that are adjacent to each other. Too many questions undermines a website's credibility.

Instead of this:

What do I do if I have a problem or concern?

The text could be:

What to do if you have a problem or concern

Mobile

On mobile, text wraps at about 35 characters (including spaces), so shooting for copy that's shorter than that will prevent stacking of accordion labels. Screen shot:

Examples of accordions

Our accordions are all closed to begin with; we do have the option for the first accordion to be open.

Accordions Closed

Accordions Opened

Do NOT use tabs, pills or accordions when:

• Information in multiple sections will be compared to each other
• The content in different sections doesn't logically relate to one another

More info

•   Accordions 
•   Tabs 
•   Pills