Content display / The visual dictionary
Accordion.
Stacked sections that expand to reveal content.
Also calledcollapsible sectionsdisclosure group
01
UI illustrationSee it in context
A clear answer, right where you need it.
A clear answer, right where you need it.
A clear answer, right where you need it.
02
What it is
An accordion pairs each heading with a button that reveals its associated panel. It saves vertical space when people need some sections but seldom all of them at the same time.
When to use it
Use for related optional details such as FAQs.
Know the difference
An accordion is a collection of disclosures; tabs swap one panel in a shared content region.
03
Across platforms
WebiOSiPadOSAndroidmacOSWindowsLinuxvisionOS
iOS · iPadOS · macOS · visionOS
Use the native platform presentation and terminology; adapt density and interaction to touch, pointer, remote, or spatial input rather than copying a phone-sized view.
Web · Android · Windows · Linux
Use semantic content structures on the web. Touch, pointer, and remote layouts need different target spacing even when the same information is shown.
04
Go to the source
Primary documentation for the pattern and its platform conventions.