`<details name>` now builds exclusive accordions natively across all major browsers

Exclusive accordions are now native HTML

Building an exclusive accordion — a group of panels where opening one closes the rest — no longer requires JavaScript in any current major browser. As a dev.to article by Parsa Jiravand explains, the name attribute on the details element now handles the mutual-exclusivity logic that developers have been hand-rolling for years.

The script everyone used to write

details and summary have long provided a native, keyboard-accessible disclosure widget, but each element managed its own open state independently, so ten FAQ panels would happily sit open at once. According to the article, the standard workaround was a small script: select the panels by class, attach a toggle listener to each, and loop over all of them to force siblings closed whenever one opens.

That script carries hidden costs. It depends on a class being applied consistently, adds a listener per panel, and runs its loop on every open whether or not anything needs closing. It also fails silently when markup is injected after the initial script runs — a copied FAQ block without re-initialisation simply reverts to independent panels, with no error to explain why. Add nested accordions or two independent groups on one page, and the script needs scoping logic that turns it into a small state machine.

One attribute replaces the loop

Chrome 120 and Safari 17.2 shipped support in late 2023, and Firefox followed in version 130 in September 2024, the article reports. Any details elements that share a name value form a single exclusive group: opening one closes the others automatically. Adding a new panel to the group requires nothing more than another element carrying the same name.

Support is now Baseline across Chrome, Edge, Firefox and Safari, so the pattern is production-ready today. Where the attribute is unsupported, the fallback is graceful rather than broken: each details reverts to independent behaviour and remains a working, keyboard-accessible disclosure widget instead of a placeholder waiting for a script.

Grouping follows the name, not the DOM

One behaviour the article flags as unexpected: grouped elements do not need to be siblings or share a parent container. Grouping is determined by the name value alone within a DOM tree, although a shadow root starts its own groups. Two details name="settings" elements in unrelated sections of a page will still close each other.

The HTML spec permits this but advises authors to keep related elements together in a containing element, because a relationship between distant parts of the page is hard to discover — particularly for screen-reader users. The practical hazard is accidental name reuse: paste a component, forget to change the group identifier, and two accordions meant to be independent start fighting over state, with no console warning to reveal the cause.

Where JavaScript still earns its keep

Native grouping replaces only the sibling-closing loop. According to the article, scripts remain necessary to open a panel from an external control — setting the open property to true, after which the browser closes the rest — to persist the open panel across reloads, and to track which panel was opened, using the toggle event and checking event.newState === "open". A browser-closed sibling also fires a toggle event, with a newState of "closed". Anchor links need no help: in current browsers, following a fragment link that points at content inside a closed panel expands it natively, and the group closes the previously open one.

Why it matters

The change is part of a broader pattern: the web platform absorbing behaviours that used to require userland plumbing, much as dialog gained native modal semantics and input type="date" shipped a full calendar widget. For teams, it deletes a recurring class of bug — keeping state consistent across a group of elements — while preserving keyboard accessibility by default rather than bolting it on with ARIA. The practical lesson from the article is to check the documentation before writing a loop that closes siblings or enforces "only one open at a time"; the browser may already have shipped the feature.