← back
Accordion
What is an accordion?
▾
An accordion is a UI pattern that shows and hides content sections one at a time, keeping the interface compact.
How does it animate?
▾
The content area transitions from
max-height: 0
to a set maximum, combined with
overflow: hidden
to create a smooth slide effect.
Single open mode
▾
Only one item can be open at a time. Opening a new item automatically closes the currently open one.
Accessibility
▾
Each button uses
aria-expanded
to communicate the current state to screen readers and assistive technology.