An accordion with no JavaScript

Q: Can an accordion open one panel at a time without JavaScript?

Yes — give every <details> the same name and they behave as one exclusive group, closing the previous panel when the next opens. It is one attribute, and it has been supported in Chrome, Firefox and Safari since 2025.

Q: How do I hide the disclosure triangle?

Two declarations, not one: list-style: none on the summary and ::-webkit-details-marker { display: none } . Miss either and one browser keeps a triangle you never designed for.

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 14 Aug 2026

Questions

Can an accordion open one panel at a time without JavaScript?

Yes — give every <details> the same name and they behave as one exclusive group, closing the previous panel when the next opens. It is one attribute, and it has been supported in Chrome, Firefox and Safari since 2025.

How do I hide the disclosure triangle?

Two declarations, not one: list-style: none on the summary and ::-webkit-details-marker { display: none }. Miss either and one browser keeps a triangle you never designed for.

What happens in a browser that ignores the name attribute?

Every panel opens and closes independently — all of the content instead of none of it, which is the right way round for a fallback to fail. Nothing is hidden and nothing is trapped shut.