# Accordion

Source: https://design.ritchiebros.com/components/surfaces/accordion/

An accordion puts long sections of information under a block that people can expand or collapse, keeping lower-priority content out of the way until it’s needed.

## Figma

The Figma reference for **Accordion** will appear here once the design link is added.

## Storybook

Interactive examples for **Accordion** will render here once the Storybook link is wired in.

## Best practices

- Use it for information that’s lower priority or that people don’t need to see all the time.
- Don’t use it to hide error messages or other critical information that needs immediate action.
- Place the expandable content immediately after the control that toggles it.

## Do’s and don’ts

**Do:** Collapse supplementary detail that only some people need.

**Don’t:** Hide critical, time-sensitive content behind a collapsed panel.

## Accessibility

- The toggle control conveys expanded/collapsed state via aria-expanded, and points to the panel it controls via aria-controls.
- Keep the panel adjacent to its trigger so people using magnification or screen readers can tell what changed.

## Related components

- [Card](https://design.ritchiebros.com/components/surfaces/card/)
- [Button](https://design.ritchiebros.com/components/inputs/button/)