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 succinctly describes the content it discloses. Titles are available in a small and large size. The default size is small.

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

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.