UI Component Lab 日本語

← All components

Disclosure

Accordion

A vertical stack of headings that each show or hide a section of content.

Also known as

How to recognize it

A list of rows separated by lines, each with a title and a +/− or chevron icon. An open row shows its content directly below the title.

Behavior

  • Clicking a heading opens or closes its section.
  • The icon changes to show whether the section is open.
  • Some accordions allow only one open section at a time; this demo lets each section open independently.

Keyboard

KeyAction
Tab / Shift + TabMoves between headings and content.
Enter / SpaceOpens or closes the focused section.

Usage notes

  • Do not use it just to save space or to hide important information.
  • To collapse supplementary content within a single section, use a disclosure instead.
  • Do not nest it inside a list, table, accordion or disclosure.
  • Disclosure: An accordion is a set of disclosures stacked under headings; a disclosure is a single toggle on its own.
  • Tabs: An accordion stacks sections vertically and can open several at once; tabs show one panel at a time side by side.
  • Tree view: An accordion opens sections of content; a tree view opens nested items, such as folders, in several levels.

Sources