Pure CSS Animated Details Accordion

This Pure CSS Animated Details Accordion utilizes cutting-edge CSS functions to achieve smooth height transitions on native HTML elements without a single line of JavaScript. By leveraging the revolutionary calc-size() function and the ::details-content pseudo-element, it finally solves the age-old problem of animating from height: 0 to height: auto.

Core Technique

The core logic of this snippet moves away from traditional “hacks” (like animating max-height) and embraces the future of the CSS standard.

1. The calc-size() Revolution

The primary mechanism for the smooth reveal is the calc-size() function. Historically, browsers couldn’t interpolate between a fixed length and an intrinsic keyword like auto. calc-size(auto, size) tells the browser to treat the “auto” height as a measurable value that can be transitioned.

.details[open]::details-content {
	/* Fallback for older browsers */
	block-size: auto;
	
	/* The magic: transition to auto height */
	block-size: calc-size(auto, size);
}

2. Targeting Hidden Content with ::details-content

The snippet utilizes the new ::details-content pseudo-element. This allows developers to style the wrapper that contains the toggled content inside a <details> tag. By setting block-size: 0 on this pseudo-element in the closed state and defining a transition, we gain full control over the expansion phase.

3. Discrete Transitions

To make the animation work with properties that generally don’t support interpolation (like content-visibility), the code uses transition-behavior: allow-discrete. This ensures the browser keeps the element in a “transitionable” state during the entire animation duration, preventing the content from instantly popping in or out.

.details::details-content {
	transition-property: block-size, content-visibility;
	transition-duration: 0.5s;
	/* Essential for smooth behavior on discrete properties */
	transition-behavior: allow-discrete;
}

4. Exclusive Accordion Behavior

By giving all <details> elements the same name attribute, the browser natively handles “exclusive” behavior. Opening one section will automatically close any other open section in the group, effectively turning a list of elements into a true accordion component without any scripts.

Browser Support

This snippet uses experimental features. While it is highly semantic and accessible, the visual animation currently requires modern Chromium-based browsers.

In January 2026, this represents a “progressive enhancement” approach. In unsupported browsers, the accordion still works perfectly as a standard, non-animated <details> element, fulfilling all functional requirements while rewarding users on modern browsers with a premium animated experience.