# Accordion

> An accordion is a list of rows that each expand to show more content and collapse to hide it. iOS calls the pattern a disclosure group, and Material 3 has no accordion component.

Page: https://www.appetiteui.com/glossary/accordion. Accordion and disclosure group on iOS and Android. Also called Disclosure group, Expandable list, Collapsible section.

## Why it matters

An accordion hides details until they are relevant, which keeps a long screen short. Apple puts the most likely controls at the top so they are always visible and hides advanced ones.

It costs a tap per answer, so it suits a FAQ better than steps people must all read.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Disclosure group | No component: expandable list item in code | Accordion |
| Closed row in the file | List row, 44 minimum | List row, 56 minimum | See below |

## In Appetite UI

Accordion is a 340 wide card row, 56 tall when closed, with its own radius 24 and shadow. A native list row is 44 tall on iOS and 56 on Android, read from platform/list-row/min-height.

## Example

A help screen lists questions as rows. Tapping Refunds opens the answer below it and turns the chevron; the other rows stay shut.

## Common mistakes

- Hiding content people need on first view.
- A label that does not say what opens. Name it, such as Advanced options.
- Opening one row and closing another without a reason.
- Hiding the only route to a main action.

## Questions

### Does iOS have an accordion?

The pattern is a disclosure group in SwiftUI, with a disclosure triangle or button that points inward when the content is hidden and down when it is shown.

### Does Material 3 have an accordion?

No component. Material builds the pattern from expandable list items in code.

## Sources

1. [Apple Human Interface Guidelines: Disclosure controls](https://developer.apple.com/design/human-interface-guidelines/disclosure-controls)
2. [Apple Human Interface Guidelines: Lists and tables](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables)

## Related

- Docs: [Accordion](https://www.appetiteui.com/docs/accordion)
- Docs: [List](https://www.appetiteui.com/docs/list)
- Glossary: [List row](https://www.appetiteui.com/glossary#list-row)
- Glossary: [Empty state](https://www.appetiteui.com/glossary/empty-state)
- Glossary: [Divider](https://www.appetiteui.com/glossary/divider)