Details & Summary

A built-in web platform disclosure, accessible by default — no JavaScript required.

Smooth Height

Apply interpolate-size: allow-keywords to create smooth auto-to-open transitions on height/block-size, zero hacks.

Timings

Mess with the timings, use linear() to get that little bounce.

Progressive

Start with plain details/summary markup using [name]. Enhance with interpolate-size: allow-keywords. Then add some scripting for the buttons and to switch motion styles.

Follow for more

You can find me on X or consider signing up my newsletter.