PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Want only one answer open at a time—so clicking a second question closes the first? Give related <details> elements the same name. The browser then keeps only one member of that group open, without a JavaScript loop.
Make a native exclusive accordion
A <details> element creates a disclosure widget; its <summary> provides the visible label, and the remaining content is the panel. Repeat the same name value on the disclosures that should close one another:
<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>Because both elements use name="faq", opening one closes the other. Use a different name for a separate accordion group. This behavior is documented in MDN’s reference for the name property.
How this differs from ordinary disclosures
Without a shared name, each <details> works independently: readers can leave several disclosures open at once. Shared names establish exclusivity, not merely a visual accordion style. Group members do not need to sit next to each other in the source, though keeping related disclosures together usually makes the page easier to understand. See MDN’s <details> reference.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
If more than one member of a group has the open attribute in the initial markup, only the first one in source order is rendered open. Avoid marking multiple group members open when the intended starting state is ambiguous.
When JavaScript is still useful
Native grouping handles the one-open-at-a-time rule. You may still need application code for behavior beyond that rule, such as saving the open panel across reloads, recording analytics, or opening a panel from a separate control. These are additional application requirements, not prerequisites for exclusivity.
A <details> element emits a toggle event when its open state changes, which can provide a hook for such behavior; consult MDN’s event documentation. For a basic accordion, replacing a JavaScript loop that listens for toggles and closes sibling panels with the shared name attribute removes that exclusivity logic from your application. That can also mean less initialization and less scoping to maintain as content changes or groups become nested. Those are code-maintenance considerations, not a measured performance claim.
Check support and choose the right grouping
MDN marks HTMLDetailsElement.name Baseline 2024, with broad availability since September 2024. Its documentation lists Chrome 120, Safari 17.2, and Firefox 130 as supporting milestones; Firefox has had the feature enabled by default in stable releases since version 130. These support notes were checked on October 8, 2026. If your project must support older browsers, verify behavior against your actual browser requirements before relying on the attribute.
- Use one shared name for disclosures that should close one another.
- Use distinct names for independent groups.
- Write descriptive
<summary>text so each control makes sense to readers. - Choose exclusivity only when it helps users; for some content, allowing several panels to remain open is more useful.
The name attribute supplies the grouping behavior; it does not by itself guarantee an accessible experience. Make the relationship between panels understandable, and use exclusivity only where it suits the content. The HTML Standard cautions authors to consider whether exclusive groups help or harm users.
Quick Recap
Best Value
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
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.
