Animated accordions without JavaScript using details

Because details already brings the behaviour a custom accordion laboriously rebuilds. summary is keyboard reachable, Enter and Space toggle it, and the open or closed state reaches screen readers without a script setting aria-expanded. The element has run in every major browser since January 2020.

One advantage only shows when it is missing. The browser's find in page locates text in closed entries too and opens the matching one. According to MDN, Chrome has done that since version 97, Firefox since 148 and Safari since 26.2, there still with a bug when scrolling to the match. An accordion made of a div and a button, by contrast, hides its content in a way that search does not find or does not expand.

What details could not do for a long time was styling. The content appeared all at once, and to open it smoothly you had to wrap it in an element of its own and measure the height with a script. That is exactly what the three pieces in the next sections change.

With the same value in the name attribute on every details in the group. When someone opens an entry, the browser closes the one that was open. Chrome and Edge have supported that since version 120, Firefox since 130 and Safari since 17.2. Since September 2024 the attribute has therefore counted as Baseline.

name does not prevent all entries from being closed. A click on the open one closes it as usual. And if two entries carry open in the markup, only one stays open: in a test with Chrome 153 it was the first. If you want to open an entry in advance, set open in exactly one place.

Whether a group should be exclusive at all is a separate question. In an FAQ where someone wants to compare two answers, it gets in the way when the first one collapses. For settings or steps that follow one another, it helps, because the page stays short.

A pseudo-element for everything in details except summary. It can be styled like a box, with height, overflow, spacing and transitions, without wrapping the content in an extra element. Chrome and Edge have supported it since version 131, Firefox since 143 and Safari since 18.4. Since September 2025 it has counted as Baseline.

That became possible because Chrome changed how the content area is rendered in version 131: it is now a block instead of an element that only passes its children through. Only with that does it have a height of its own that can be set and animated.

Safari has one limitation. Pseudo-elements cannot be chained onto ::details-content there, so a ::details-content::before does not apply. If you need a divider or a gradient on the content, put it on an element inside the answer.

With interpolate-size: allow-keywords on :root and a transition on height on ::details-content. Until now auto was not a value a browser could calculate between it and a number, so the height jumped. interpolate-size allows exactly that calculation. The property is inherited, so one line on :root covers the whole page.

That is enough for opening. Closing needs a second entry in the transition. A closed details hides its content through content-visibility, and that happens immediately, before the height could shrink. With content-visibility and allow-discrete in the transition, the switch waits until the end of the duration and the content stays visible while it collapses. allow-discrete has run since Chrome 117, Firefox 129 and Safari 17.4.

overflow: clip cuts the content off during the motion. hidden would work too, but clip does not create a scroll container. In a test with Chrome 153 the accordion opened and closed smoothly in both directions this way, even when name collapsed the entry that was open before.

An accordion that opens and closes correctly, but without motion. In November 2026, MDN's browser data lists interpolate-size only for Chrome and Edge from version 129, as experimental. caniuse shows no support in Firefox up to version 162 and Safari up to 27.3 and arrives at around 74 percent of global usage in October 2026.

Because both browsers know ::details-content, height: 0 and height: auto still apply there. Only the transition between them is missing, because without interpolate-size auto is not a target that can be calculated towards. The result is the familiar details, and no fallback is needed to repair anything.

The calc-size function, which could animate auto without the property on :root, does not help here. It is available in the same browsers as interpolate-size, so again only in Chrome and Edge from 129.

With the details-content variant for the content area, open for the open state and an arbitrary property for interpolate-size. Checked in Tailwind CSS 4.3.5: details-content: writes to ::details-content, open: matches details with the open attribute, and transition-discrete sets transition-behavior: allow-discrete. There is no dedicated class for interpolate-size, the square bracket syntax generates it.

The variants can be chained. open:details-content:h-auto gives the content of an open details height auto, and because this rule is more specific than details-content:h-0, it wins without detours. motion-reduce:details-content:transition-none switches the motion off when reduced motion is set.

In React the accordion stays free of state. name and open are ordinary attributes, and the browser keeps track of which entry is open. If you do need the state, listen for the toggle event instead of setting open on every render.