Accordion
List of short sections where one opens at a time.
Master
Open one item at a time. Clicking the open item closes it.
Weekdays 9 to 5. Closed on public holidays.
Knez Mihailova 1, Belgrade.
Free parking behind the building for the first two hours.
Usage
Use Accordion for FAQs or short groups of details the user opens one at a time. Opening one item closes the others. Clicking the open item closes it. See contracts/accordion.json for the full contract.
Do's
- FAQ or help copy grouped under short titles.
- Settings or detail groups the user opens one at a time.
Don'ts
- Do not invent a local Accordion, Collapse or Disclosure.
- Do not open more than one item at a time.
- Do not use for switching between peer views of the same data.
- Do not put a full form inside every panel.
- Do not use raw hex.
<Accordion
defaultExpanded="hours"
items={[
{ id: "hours", title: "Hours", content: "Weekdays 9 to 5. Closed on public holidays." },
{ id: "address", title: "Address", content: "Knez Mihailova 1, Belgrade." },
{ id: "parking", title: "Parking", content: "Free parking behind the building for the first two hours." },
]}
/>