Animated Accordion
An accordion that creates space around the active item as its content expands.
- Category
- Disclosure
- Year
- 2026
- Status
- Experiment
What it is
A disclosure pattern with stronger spatial emphasis.
The component keeps the familiar accordion interaction while giving the open item more physical space. Neighboring rows move away from the active item, making the relationship between the trigger and its revealed content easier to follow.
This treatment works best for a short, curated list where opening an item is a meaningful moment. A dense FAQ or frequently scanned settings page would benefit from a quieter accordion with less surrounding movement.
Design decisions
How expansion, hierarchy, and feedback work together.
Active-item space
Rows above and below the open item move in opposite directions, creating a temporary visual boundary without inserting another container.
Continuous panel
The panel expands from the trigger’s own item rather than appearing elsewhere, preserving the source and destination as one continuous surface.
Coordinated indicator
The plus icon resolves into a minus as the panel opens, providing immediate state feedback before the content finishes settling.
Single open item
Opening a new row closes the previous one, keeping the stronger spatial treatment focused on one piece of content at a time.
Sona UI
Use the maintained production version.
Continue exploring
Another experiment in coordinated vertical movement.