Skip to main contenteBay Playbook

Accordion

v1.2

An accordion is a vertically stacked set of sections that can be individually expanded or collapsed to show or hide a block of related content, allowing users to scan headings and reveal details on demand.

  • CSS
  • Marko
  • React
Stylized artwork of an accordion.

Considerations

Progressive

Accordions reduce visual complexity and information density.

Empower

Users decide what information they want to see and when.

On-demand

Revealing and hiding information is a single tap away.

Anatomy

Accordion diagram with 4 elements numbered: 1. Title, 2. Icon button, 3. Content, 4. Divider.
  1. Title
  2. Icon button
  3. Content
  4. Divider

Properties

Title

The title describes what the accordion section is about.

Use clear, specific language so users can decide whether to expand without reading anything else. Keep syntax parallel across all items so the accordion is easy to scan. 

  • Use sentence case
  • No ending punctuation
  • Use nouns or noun phrase
  • Max character count: 30
Three Accordions with different titles: ‘Shipping and returns’, ‘Description’, and ‘Specifications’.

Icon

Icons can be used next to the title. The icon size stays the same for both the small and large title size.

Two Accordions with different titles: ‘Shipping and returns’ with a truck icon and ‘Description’ with a note icon. Below is a an example of 5 accordion rows with the title “Accordion title” with a default icon next to each title.

Content

The content area of an accordion row primarily includes text, but can also contain images or other components.

Lead with the most important information and keep it focused on the topic described in the title. Break long content into short paragraphs, bulleted lists, or use subheadings.

  • Use sentence case
  • Use ending punctuation
  • Use complete sentences
  • Max character count per line: 75 characters
Three Accordions with different titles: ‘Shipping and returns’, ‘Description’, and ‘Specifications’. The second row has a text description example about a lounge chair.

Divider

Dividers are shown between accordion rows to aid visual clarity.

Three Accordions with different titles: ‘Shipping and returns’, ‘Description’, and ‘Specifications’. A label points to the dividing line between rows.

Behavior

Expand/Collapse

Selecting any part of the row, including the title or icon button, will expand or collapse the individual row. The icon adjusts to indicate the closed or open state of each row. Rows remain open until closed manually unless auto-collapsing is configured. See motion specs.

Note: Accordions require two or more rows. If only one row is needed, consider the expansion component.

Two row accordion displaying one row with a paragraph of text describing the lounge chair, and a second row showing name value pairs relating to the characteristics of the item.

Layer states

Hover and focus states are applied to each title row. See Interaction states for more details on layer state styling.

An example of Accordion title rows, one showing hover state and one showing focus state.

Text overflow

Accordions use a flexible layout so that titles and text content will wrap to multiple lines without limits or truncation. The accordion height will flex to fit various types of content.

Three Accordions with different titles: ‘Shipping and returns’, ‘Dimensions and product specifications’, and ‘Description’. The second row includes a multi line text description example about a lounge chair.

Screen sizes

Small

Accordions fill the entire width of the content area on small screens up to a max of 480px.

Two accordion examples on mobile screens. The first accordion is displaying one row with a paragraph of text describing the lounge chair, and a second row showing name value pairs relating to the characteristics of the item. The second accordion is displaying a set of nested sub-navigation for filtering.

Large

Accordions fill the width of the parent containers on large screens.

A ‘See more’ Accordion below a ‘Description’ section on an eBay larger page.

Full-width

Text-heavy examples like a marketing or FAQ page can use accordions that fill the content area with larger title text sizes.

A ‘See more’ Accordion below a ‘Description’ section on an eBay larger page.

Best practices

Button title

Keep the title short and concise. Only add additional qualifiers if it’s necessary to clarify the expected content.

Accordion collapsed with short headings

Don’t use long or wordy titles. Extra long titles can negatively affect the overall hierarchy.

Accordion collapsed with long headings wrapping to multiple lines

Icon

When using icons, they must be present for each title.

Accordion collapsed with short headings

Don’t use icons for only some titles

Accordion collapsed with long headings wrapping to multiple lines

Sub sections

Use clear sub sections inside of accordion rows.

Accordion row containing one sub section or nested options with chevron icons

Don’t nest accordions or use complex layering.

Accordion row containing complex nested sub sections

Specs

Accordions are shown with specs highlighted. A closed accordion row with a small title is 48px in height. A closed accordion row with a large title is 52px in height. The padding on the top and bottom of the title is 12px, the padding before and after the row is 12px. An expanded accordion row adds padding between the title and content of 12px. Padding below the content is 6px.