# Exclusive accordions using the HTML details element

DevFeed: [Exclusive accordions using the HTML details element](<https://devfeed.tech/articles/exclusive-accordions-using-the-html-details-element-4063.md>)

Original publisher: [Read original article](<https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/>)

Author: brian-smith

Published: 2024-08-05T00:00:00Z

Content type: tutorial

Language: en

Sources: [MDN Blog](<https://devfeed.tech/sources/mdn-blog.md>)

Topics: [Web platform](<https://devfeed.tech/topics/web-platform.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [browsers](<https://devfeed.tech/tags/browsers.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [css](<https://devfeed.tech/tags/css.md>), [feature](<https://devfeed.tech/tags/feature.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [html](<https://devfeed.tech/tags/html.md>), [scripting](<https://devfeed.tech/tags/scripting.md>), [support](<https://devfeed.tech/tags/support.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

The article explains how the HTML details element's name attribute can create exclusive accordions, allowing only one section in a group to remain open. It also discusses browser support and using HTML and CSS instead of custom scripting.

## Source excerpt

The 'name' attribute of the HTML details element is gaining more support across browsers. Learn how this feature allows creating exclusive accordions without scripting widgets from scratch.