04 · Accordion

Accordion

details / summary with smooth transition

Chrome 120+

← Index

Why details instead of div + JS? ⌄

It's already accessible and works without JS. Now it can also be animated smoothly.

What does interpolate_size do? ⌄

interpolate-size: allow-keywords enables interpolating auto in size transitions (previously discrete).

And allow-discrete? ⌄

Keeps content-visibility visible during closing so the height animation plays in full.

Support? ⌄

Chrome 120+ for details-content + interpolate-size. In other browsers the accordion works, just without animation.

css

details {
  interpolate-size: allow-keywords;
}

/* el contenido se anima de height 0 a auto */
details::details-content {
  overflow: hidden;
  height: 0;
  transition: height .3s ease,
              content-visibility .3s allow-discrete;
}

details[open]::details-content {
  height: auto;
}

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".