Implementing an accordion component in 2026 🪗

This accordion component only uses built-in HTML and CSS features of the web platform. No components library, no JavaScript code.

In recent years, the web platform has grown new capabilities to style and animate built-in HTML elements like the <details> element. These capabilities make it possible to easily create an accordion component like the one here.

The benefits of using built-in web platform features for this are:

Better for performance: there's no need to download and run custom or third-party JavaScript code to generate, style, and animate the component.
Better for accessibility: the built-in <details> element is accessible by default. The element is focusable by the browser and supports a keyboard accessible action to expand and collapse the content.

To learn more about the web features which you can use to create a component like this one, open the sections in the accordion.

Mutually exclusive <details> elements

By setting the name attribute of <details> elements to the same value, only one section can be open at a time. Opening a section automatically closes any other open section with the same name value.

Mutually exclusive <details> elements have been supported by all major browsers since September 2024.

This accordion does not use the name attribute because mutually exclusive accordions are not accessible but if you really need to use one, at least you don't need JavaScript code for it.

Learn more

Style the expandable content with ::details-content

The ::details-content pseudo-element allows styling the expandable content part of a <details> element only.

The ::details-content pseudo-element saves you from having to nest an additional container element.

In this example, the pseudo-element is used to add inline padding to the content, and a top border to separate the content from the <summary> element.

The ::details-content pseudo-element has been supported by all major browsers since September 2025.

Learn more

Animate to an intrinsic size with calc-size()

The calc-size() CSS function, and the interpolate-size CSS property, allow animating an element's size to or from an intrinsic size like auto.

This has long been needed to animate the opening of sections which contain unknown content, such as user-submitted content.

This accordion uses the calc-size() function to set the expanded height of the ::details-content pseudo-element to auto + 1rem. Doing so automatically applies the interpolate-size:allow-keywords style to the element, which enables animations to CSS keywords like auto.

The component also uses the ability to animate the content-visibility CSS property, by using transition-behavior: allow-discrete. This allows to hide the content in sync with the animation of the size, preventing the browser from hiding the content before the collapse animation is complete.

Animating to an intrisic size is only fully supported on Chromium-based browsers, but can be used as a progressive enhancement. Users of non-supporting browsers will still be able to use the accordion.

Learn more about calc-size(), interpolate-size, and animating display properties like content-visibility.

Style the expander icon with ::marker

The ::marker pseudo-element lets you style the expander icon part of the <summary> element.

This pseudo only supports a limited number of properties, which are likely enough for a majority of use cases. These properties are:

All font properties
The white-space property
color
text-combine-upright, unicode-bidi, and direction
The content property
All animation and transition properties

At the moment, Safari only supports styling the color and font-size properties.

This example accordion doesn't use the ::marker pseudo-element. A custom icon is displayed by using the ::after pseudo-element instead, which provides more flexibility.

Learn more