Accordion & Tab Set

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.

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.)

Examples