Expandable Card CSS

How the Expandable Card works

Expandable card CSS: details and summary

Collapsible content used to mean a JavaScript widget, an ARIA pattern to get right and a dozen edge cases around focus and screen readers. The <details> and <summary> elements do all of that in the browser: clicking or pressing Enter on the summary toggles the content, the expanded state is announced to assistive technology, and the open attribute reflects the state in the DOM. The job left for CSS is to make it look like a card rather than a disclosure triangle.

Removing the default marker. Browsers draw a triangle before the summary text. Setting list-style: none on the summary removes it in Firefox and Chromium, and the ::-webkit-details-marker rule handles Safari. With the marker gone, the summary becomes a flex row that can hold a title, a subtitle and your own icon at the end.

The icon is a pseudo-element. The chevron and plus options are rendered by ::before on a small circular badge, and the [open] attribute selector swaps or rotates it. A chevron rotates 90 degrees; a plus becomes a minus by changing content. The icon is aria-hidden because the state is already conveyed by the details element itself — a screen reader will say "expanded" or "collapsed" without any help from the glyph.

Why the open animation is a fade, not a slide. Height animation on <details> is notoriously awkward because the content goes from display: none to visible in one step. Newer browsers can animate it with interpolate-size: allow-keywords, but support is still uneven. A short fade and six-pixel rise on the body gives the open state a sense of motion that works everywhere, and the reduced-motion query turns it off for visitors who have asked for that.

Preview open or closed. The Preview control toggles the open attribute in the sample markup so you can style both states. You can also just click the card in the preview. Only the initial state is baked into the copied HTML; remove the open attribute if you want the card collapsed on page load.

Grouping several cards. Stack multiple expandable cards for an FAQ or a feature list. If you want only one open at a time, give every <details> the same name attribute — recent browsers treat that as an exclusive accordion natively, again without a script.

Focus and contrast. The summary shows an accent-coloured outline on keyboard focus so the control is visible when tabbed to. The subtitle sits at 70% opacity to read as secondary; if your text and background colours are close, check that it still meets contrast requirements.

Related tools