Want only one answer open at a time? Give related <details> elements the same name value. Click a second question and the first one closes—the browser handles the exclusive behavior without a JavaScript loop.
Make a native exclusive accordion
A <details> element creates a disclosure widget, and its required visible label is a <summary> element. To make several disclosures exclusive, repeat the same name value on each one:
As an Amazon Associate I earn from qualifying purchases.
<details name="faq">
<summary>Can I change my plan?</summary>
<p>Explain the answer here.</p>
</details>
<details name="faq">
<summary>How do I contact support?</summary>
<p>Explain the answer here.</p>
</details>The shared name="faq" puts the disclosures in one exclusive group. Opening one closes another member. The answer belongs inside its own <details>, after the summary. For a separate accordion, use a different name, such as name="account-help".
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →What the browser does—and what it does not do
Without a shared name, each <details> disclosure can open or close independently. With a shared name, the browser enforces exclusivity for group members; they do not have to sit next to one another in the source. If several members are marked open in the initial HTML, only the first in source order is rendered open.
The name property is listed by MDN as Baseline 2024, with broad availability across current browsers since September 2024. MDN’s browser milestones include Chrome 120, Safari 17.2, and Firefox 130; Firefox has enabled it by default in stable releases since version 130. This does not mean that every legacy browser supports it. If older browsers are in your support target, verify their behavior and decide whether you need a fallback.
When JavaScript is still useful
For basic “one answer open at a time” behavior, the native group replaces the script that would otherwise listen for a disclosure to open and close its siblings. A hand-written loop also needs to select the right items and remain correctly scoped as content changes or groups become nested. Those are maintenance considerations, not measured performance claims.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
JavaScript can still add behavior beyond exclusivity. For example, an application may need to save the open panel across reloads, record analytics, or open a disclosure in response to a separate control. A <details> element emits a toggle event when its open state changes, which scripts can use to respond to those changes.
Recommended Free Tools
| Need | Native group | Application script |
|---|---|---|
| Only one related panel open | Use the same name on each <details>. |
Not needed for this behavior in browsers that support the feature. |
| Support for browsers without the feature | Native exclusivity may not be available. | May be needed if those browsers must receive the same behavior. |
| Persistence, analytics, or an external open control | Does not provide these application-specific behaviors by itself. | Use script for the additional behavior. |
Choose groups that make sense to users
Use a shared name only when the panels genuinely belong together and opening one should close another. Keep independent topics in distinct groups; exclusivity can be inconvenient when readers need to compare or revisit multiple answers. Although group members can be nonadjacent, placing related disclosures together in the page structure can make the relationship easier to understand.
Quick Recap
Best Value
- Write descriptive summary text so each disclosure is identifiable.
- Keep each answer within its own
<details>element. - Do not treat the shared
nameas a guarantee of accessibility; the wording and organization still matter.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
