Accordion & Tab Set

Accordion & Tab Set

Best Practices

Updated May 10, 2018

Overview

An accordion is a collapsible / expandable container for organizing related sections of content in a compact space.  A tab set serves the same purpose, but the content is separated into tabbed panes, with one pane viewable at a time.  To provide CDC web developers with the flexibility to handle special presentation needs, the WCMS continues to offer these content elements for TP4. However, they are not recommended for most content. Before building an accordion or tab set, make certain that your team has considered other presentation options and understands the challenges these module types present for end users.

Frequently Asked Questions

Q: Lorem ipsum dolor sit amet, consectetur adipiscing elit?

A: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Q: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur?

A: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Q: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum?

A: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Q: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur?

A: Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Q: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi?

A: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Q: Lorem ipsum dolor sit amet, consectetur adipiscing elit?

A: Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

The example above is a tab set with three tabs.  Note that tabs convert to accordion panes in mobile viewports 1 and 2, so you can see this example in accordion layout by viewing in the those viewports.

Usage

For most content, accordions and tabs are not recommended for several reasons:

  • Users may overlook important content.
  • Users cannot scan information easily.
  • Accordions / tabs do not work well in small viewports.
  • They do not print well.

Generally, avoid using tabs and accordions to present core content.

When to use:

  • To present supplemental content, such as frequently asked questions or examples.
  • To present a long list that can be organized into categories — but use tabs only if the visitor needs to open only one section at a time (for example, zip codes by state).

Note that a common use of tabs and accordions is to present date-based information.  Make certain you have a good idea how your users are likely to interact with the information before using this approach. Consider, for example, a tab set called “Reports by Year.”  If the goal is to help users find specific reports by year, the tab set will likely frustrate users.  After all, users might not know the year of a report they’re looking for.  And how many tabs will be needed ultimately?  The more tabs, the poorer the user experience overall.

Other options:

  • Place the information outside the tab / accordion container on a single page, perhaps with an “On This Page” module that provides easy navigation to the different categories of information.
  • For very heavy content, develop a landing page that branches to content pages.

Guidelines

  • Use judiciously, as explained above.
  • Make sure labels are clear and unambiguous.
  • Do not nest accordions.
  • Test the number of tab items in the smallest desktop viewport (VP4) to ensure the tabs do not wrap onto multiple rows.
  • Avoid linking to content inside a tab / accordion section. (This includes “On This Page” links.)
  • photo icon

    Go to ExamplesSee examples on this page that illustrate key options.

Examples

Accordion Title