Back to Pack GalleryMotion Pack 12 · Change
Details disclosure
Open collapsed information in place while preserving a clear relationship with its trigger.
Build a details disclosure: after clicking the title row, rotate the arrow and expand content through height and opacity over 220ms; click again to settle closed. Keep surrounding layout from jumping abruptly.
Motion rules
Arrow, visible content, and helper copy express expanded state together.
Reduced motion
Open or close content directly while retaining aria-expanded state.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.