Native HTML Accordion — <details>/<summary>, No JavaScript

Every other pattern in this batch reaches for a hidden checkbox or radio input to fake open/closed state in CSS. <details>/<summary> doesn't need that workaround at all — disclosure state is a first-class native HTML feature. The browser tracks open/closed, handles the click-to-toggle behavior on <summary>, exposes it to the accessibility tree with the correct aria-expanded semantics automatically, and even supports Enter/Space toggling out of the box, all without a single hidden form control anywhere in the markup.

The open attribute is the entire state model

<details> carries a boolean open attribute the browser manages itself: absent means closed, present means open, and clicking the child <summary> element toggles it natively. .acc-item[open] .acc-header::after styles the disclosure icon based on that real DOM attribute using a plain CSS attribute selector — no :checked proxy, no sibling combinator gymnastics, because the state being styled is the actual semantic state of the element, not a stand-in input elsewhere in the tree.

Removing and replacing the default marker

Browsers render <summary> with a built-in disclosure triangle by default (a ::marker in most browsers, or a proprietary ::-webkit-details-marker in WebKit browsers specifically). This snippet suppresses both — list-style: none handles the standards-track ::marker triangle, and summary::-webkit-details-marker { display: none } is the extra rule needed specifically for older WebKit-based rendering, since it historically ignored list-style on summary. In its place, a custom chevron icon is drawn as a ::after pseudo-element background image, rotated 180 degrees when [open] is present — the same rotate-on-state-change idea used throughout this batch, just keyed to a native attribute instead of :checked.

Being honest about the animation limitation

Historically, <details> content snaps open and closed instantly — there is no standard way to transition height from 0 to the content's real height, because until recently browsers couldn't animate the content-visibility/display change involved in revealing <details> content at all. This snippet does not pretend that limitation doesn't exist: the smooth height reveal is wrapped in @supports (interpolate-size: allow-keywords), a genuinely new CSS property that lets height: auto participate in a transition (similar in spirit to the grid-template-rows trick used in this batch's checkbox-hack accordion, but applied directly to <details>'s native reveal). Browsers that don't yet support interpolate-size simply get the native instant open/close — which is not a broken experience, just a less animated one. This is the honest, transparent tradeoff: reach for this native element when instant (or progressively-enhanced) toggling is acceptable, and reach for the checkbox-hack + grid-template-rows accordion elsewhere in this batch when a guaranteed smooth animation matters more than using the simplest possible markup.

Why this is the simplest correct choice when animation isn't required

No hidden input, no for/id pairing to keep in sync, no sibling-combinator chain to get right — the entire interactive behavior is two native elements. That absence of moving parts is itself a reliability advantage: there's no way to misconfigure the open/close logic, because there is no logic to configure; the browser's user-agent implementation is doing exactly what a checkbox hack simulates, natively.

Where this fits alongside the rest of this batch

Anywhere <script> tags are stripped — CMS content blocks, sanitized user HTML, email, AMP, script-stripped Markdown renders — <details>/<summary> works exactly as well as it does anywhere else, because it was never dependent on JavaScript in the first place; it predates and is entirely orthogonal to the checkbox-hack technique used elsewhere in this library.