WebCraft

Home / Elements / disclosure

<details name>

An accordion with no JavaScript

Shipping

Opening any panel closes the others, because they share a name.

Returns

No click handler, no state, no library. The browser owns it.

Warranty

Keyboard and screen readers work without any ARIA from you.

CaveatHiding the marker takes two declarations, not one. Miss either and one browser keeps a triangle you never designed for.

FallbackWithout name support every panel opens independently — all the content rather than none, which is the right way round to fail.

HTML + CSS 
/* same name = only one open at a time */
<details name="faq">
  <summary>Shipping</summary>…
</details>

summary { list-style: none; }
summary::-webkit-details-marker {
  display: none;
}

Published