Skip to main contenteBay Playbook

Accordion

v1.1

An accordion is a tool used to hide and reveal content as part of progressive disclosure. Tapping the icon button on each accordion row will expand or collapse the content.

  • Skin
  • 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 the content the row can reveal. Titles are configurable to small (default) or large size. Titles can wrap to multiple lines if needed, but it’s best to keep them concise.



Three Accordions with different titles: ‘Shipping and returns’, ‘Description’, and ‘Specifications’.

Content

The content area of an accordion row can include text, images, or other components. The accordion height will flex to fit various types of content. For paragraph text, keep the line length between 40–75 characters (counting both letters and spaces).

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.

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

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.