details-animated

A JavaScript library allowing for easily animating <details> HTML elements. It replaces <details> with <div class="details">, <summary> with <div class="summary">, and wraps the content in a <div class="content"> so that you can easily use grid-template-rows transitions.

It handles aria attributes for you, and it toggles display: none on the content (after the transitions are complete) so that Tab navigation doesn't accidentally reach elements within a closed <details>.

Examples

Minimal style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae ligula tellus. Aliquam aliquam aliquam velit, sit amet auctor odio ullamcorper vel. Sed scelerisque sit amet eros et tincidunt. Pellentesque tincidunt diam est, in pharetra tortor vehicula vel.

Modern

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae ligula tellus. Aliquam aliquam aliquam velit, sit amet auctor odio ullamcorper vel. Sed scelerisque sit amet eros et tincidunt. Pellentesque tincidunt diam est, in pharetra tortor vehicula vel.

Source code