UI Components

Accordion

Expandable sections that reveal or hide content when clicked.

Also called Expandable sectionsCollapsible panelsClick-to-open sectionsOpen and close panels

Visual Example

Try it: click a section heading to expand or collapse it.

Shipping details

Delivery address, service speed, and tracking choices appear here.

Billing details

Payment method and invoice information stay tucked away until opened.

Return policy

Expandable sections keep the page scannable while preserving detail.

Plain Definition

Accordions keep headings visible while hiding details until someone asks for them.

Use them when people may only need some sections, or when a page has too much detail to show all at once.

You Might Describe This As...

  • "sections that expand when clicked"
  • "click to show more details"
  • "collapsible questions"
  • "panels that open and close"

Fast lookup

You May Also Mean

Accordions and tabs are both used to reduce visible clutter, but an accordion opens inline detail instead of swapping the whole active view.

Tabs

Check the name, visual cue, and typical use.

Tabs vs Accordion

See the practical difference side by side.

What It Is Used For

  • Grouping FAQ answers
  • Shortening long settings pages
  • Letting people scan headings first

Example User Phrasing

  • "I want sections that open and close when clicked."
  • "Hide the details until someone expands the section."