Accordion
An example of an accordion component using Motion. Animate accordion content using height: auto and accessible markup. Uses focus events and shared layout animations for keyboard accessibility.
Introduction
The Accordion example shows how to build a fully accessible accordion component with smooth animations. It uses the press event handler from Motion to detect button clicks and the animate function to create smooth height transitions, content fade effects, and chevron rotations.
One of the most challenging aspects of building accordions is animating to height: auto. While browsers now support this via interpolate-size: allow-keywords, browser support is still limited. Motion makes this easy by automatically calculating the final height and creating smooth animations that work across all browsers.