← All elements
<div class="ea"><details name="q" open><summary>One at a time</summary><p>Opening another panel closes this one.</p></details><details name="q"><summary>No script</summary><p>The browser handles it through the name attribute.</p></details><details name="q"><summary>Still accessible</summary><p>Native keyboard and screen reader support.</p></details></div>About this accordion
An accordion where opening one panel closes the others, using the shared name attribute on details elements.
How it works
All three details elements share the same name attribute. Current browsers treat that as one group, so opening one automatically closes the others, and there is no script and no hidden checkbox. The CSS only changes the border, header colour and padding for the open item.
Ways to customise it
- Add more details with the same name attribute.
- Change the blue border and header colours.
- Set open on the item you want expanded first.
Good to know
The name attribute is supported in current browsers. In older ones all items can stay open, which is a harmless fallback. Native details elements keep keyboard and screen reader support.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.