C01 Accordion

An accordion is a vertically stacked list of items that can expand and collapse to reveal or hide content. It helps organize information efficiently, reducing visual clutter while allowing users to access details as needed.

Component requirements

Component consists of a wrapper element, along with individual accordion items.

Accordion wrapper

Required:

• Title: Text field.
• Title type: Dropdown. Providers user ability to choose how title is styled. H2/H3/H4/P. Default: P
• Title icon: Dropdown. Allows users to choose icon they would like to include.

Optional:

• Title alignment: Left/ Center. Default: Left
• Icon placement: Left/Center of title. Default: left
• Top support copy: Rich text field. Allows users to add content that would appear below the title and above the accordion.
• Bottom support copy: Rich text field. Allows users to add content which would appear below the accordion.
• Open First Item: Sets first accordion item to be expanded. Default
• Limit to Single item: Only one accordion item can be expanded at a time. Default: unchecked.

Accordion items

Required:

• Panel Title: Clickable element that expands or collapses an accordion panel.
• Panel Body copy: Rich text field

Additional component notes:

• Each accordion item is treated as a new component item
• Icon indicators (+/-) are used to indicate if the accordion item is closed or open
• Accordions have a built-in functionality that allows to anchor directly into accordion content

Content guidance  

The purpose of an accordion is to;

• Improve the scannability of a webpage. Use when there's an excess of content strongly related to the focal keyword.
• House FAQ on a page without making the page too long. Use when adding "deep dive" questions relevant to the H2 tag or sub-topic but not the page overall.
• Create expandable bullet points.
• Examples:
  • Breastfeeding support accordion
  • Access opportunity for all accordions

Accordion wrapper titles (required)

• This title should be brief and contain the primary or secondary keyword.
• The title should be an H2/H3 tag.
• Two to four words is ideal. Longer titles should be used sparingly.

Top support copy (optional)

• The top supporting copy contextualizes the accordion title and its content. See an example on the access & opportunity page.
• The top supporting content can also be used to include a subject-specific CTA.

Panel title (required)

• Panel titles should accurately describe the content within that row. See an example on the first two rows of the "breastfeeding support" accordion.
• Accordions should have at least three rows.
• Title should be no longer than one row when displayed on desktop.
• Row title copy should have a header class (e.g., H2, H3 or H4).

Panel copy (required)

• Copy within each dropdown is ideally one to three paragraphs. If you have more content than that, consider breaking into new dropdowns or giving the subject its own page.
• Where possible, consider crosslinking content to other pages on the site or provide actionable links, such as to set an appointment or sign in.

Bottom support copy (optional)

• Bottom support copy should connect members of the audience who were not served by the content above.
• View an example on the "make a gift" accordion, which includes tax ID information at the bottom after connecting the audiences to different ways to donate.

ADA requirements

• Use aria-controls to link an accordion button to its corresponding content, ensuring proper accessibility.
• Each button should have a unique id referenced in aria-controls, associating it with the content it controls.
• Avoid manually setting 'hidden' display properties on content areas to ensure visibility if JavaScript fails to load.

Component examples

Example #1: Title (left), Top support copy, Bottom support copy enabled. First item open unchecked. Limit to single item unchecked.

Example #2: Title and Icon enabled (center). Top and Bottom support copy disabled. First item open checked. Limit to single item checked.