Expandable
Click-to-toggle disclosure with smooth height animation.
stable layout #disclosure#accordion#interactive
Live playground
The body content slides open with a smooth height animation. Click the header to toggle. The trick uses CSS grid-template-rows transitioning from 0fr to 1fr — a modern technique that animates to height: auto without JavaScript measurements.
Loading preview…
The body content slides open with a smooth height animation. Click the header to toggle. The trick uses CSS grid-template-rows transitioning from 0fr to 1fr — a modern technique that animates to height: auto without JavaScript measurements.