Exhibit 02 of 17
One drawer at a time
Open a drawer and the open one closes. Every drawer is a <details> with the same name, and the browser keeps only one of a name open.
The exhibit
Top drawer
Tweezers, sorted by how small a thing they can hold. The smallest pair has never been seen to close.
Second drawer
Patience, an unreasonable amount, in a jar. Some days the jar is empty, and he works anyway.
Third drawer
Spare wicks for the lamp, which is always on, so the wicks are spare forever.
Bottom drawer
Receipts from the showroom. Everything was on display. Nothing was in stock.
How it works
<details name="drawers"> groups the drawers the way a name groups radio buttons. Opening one closes the others, with no script and no CSS. The CSS draws the handles, turns the arrow and, where the browser can animate to height: auto (interpolate-size and ::details-content), slides the drawer open.
The key CSS
Cut from this exhibit’s stylesheet as it is served.
/* <details name="drawers"> on every drawer: opening one closes the others (no CSS involved) */
/* a drawer handle that turns when the drawer opens */
.x-accordion summary::after {
content: ""; width: 12px; height: 12px; flex: none;
border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
transform: rotate(45deg) translate(-3px, -3px);
transition: transform .2s;
}
.x-accordion details[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.x-accordion details[open] > summary { background: var(--acid); color: var(--on-acid); border-radius: 10px 10px 0 0; }
/* where the browser can animate to height: auto, the drawer slides */
@supports (interpolate-size: allow-keywords) {
.x-accordion .drawers { interpolate-size: allow-keywords; }
.x-accordion details::details-content { height: 0; overflow: clip; transition: height .25s, content-visibility .25s allow-discrete; }
.x-accordion details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
.x-accordion summary::after, .x-accordion details::details-content { transition: none; }
}Accessibility
This is the good kind: <details> and <summary> are native, keyboard-operable and announced as expanded or collapsed. A browser without the name attribute just lets you open several drawers, which is fine. Nothing here is worse than a script; it is simply less code.
Browser support
<details name>CSS can’t test for this one. Without it: The drawers still open and close; more than one can be open at once. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.