The HTML <details> element might be one of the most underappreciated native features we have. I’m constantly surprised by how many developers reach for JavaScript solutions when they need to show/hide content, completely overlooking this built-in option.
Mutually exclusive <details> elements
Baseline 2024 newly available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Since September 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Mutually exclusive <details> elements on Web Platform Status
The <details> element creates an expandable widget that users can open and close. Think of it as a native accordion - no JavaScript required. Here’s the basic syntax:
<section> <details> <summary>How do I return an item?</summary> <p>Visit our returns portal and follow the instructions...</p> </details>
<details> <summary>Where do you ship?</summary> <p>We currently ship to the following countries...</p> </details></section>That’s it. No JavaScript. No CSS. No aria attributes to manage. The browser handles all the accessibility features, keyboard navigation, and state management for you.
<details> Built-in Features
- Screen reader announcements for expanded/collapsed states
- Keyboard navigation using Enter and Space keys
- Proper focus management
- Semantic HTML structure
- State management without JavaScript
<details> element shines when building documentation, FAQs, or navigation menus.â–¶What is the details element?
â–¶Why use it?
â–¶Browser support?
Code implementation with Tailwind
<div class="max-w-2xl mx-auto p-8 bg-[#0f1117] rounded-xl"> <div class="mb-8"> <span class="text-gray-200">The </span> <code class="bg-[#1e2030] px-2 py-1 rounded text-blue-400"><details></code> <span class="text-gray-200"> element shines when building documentation, FAQs, or navigation menus.</span> </div>
<div class="relative"> <div class="absolute top-0 w-full h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent opacity-20"></div>
<div class="space-y-2 mt-6"> <details class="group"> <summary class="cursor-pointer p-4 text-gray-200 rounded-lg bg-[#1e2030] hover:bg-[#252837] transition-colors list-none"> <span class="inline-flex items-center"> <span class="text-blue-400 mr-2 transition-transform duration-200 group-open:rotate-90">â–¶</span> What is the details element? </span> </summary> <div class="p-4 text-gray-400 mt-1"> A native HTML element that creates expandable widgets without requiring JavaScript. Perfect for accordions, FAQs, and collapsible sections. </div> </details>
<details class="group"> <summary class="cursor-pointer p-4 text-gray-200 rounded-lg bg-[#1e2030] hover:bg-[#252837] transition-colors list-none"> <span class="inline-flex items-center"> <span class="text-blue-400 mr-2 transition-transform duration-200 group-open:rotate-90">â–¶</span> Why use it? </span> </summary> <div class="p-4 text-gray-400 mt-1"> Built-in accessibility, keyboard navigation, and state management make it a robust choice compared to custom JavaScript solutions. </div> </details>
<details class="group"> <summary class="cursor-pointer p-4 text-gray-200 rounded-lg bg-[#1e2030] hover:bg-[#252837] transition-colors list-none"> <span class="inline-flex items-center"> <span class="text-blue-400 mr-2 transition-transform duration-200 group-open:rotate-90">â–¶</span> Browser support? </span> </summary> <div class="p-4 text-gray-400 mt-1"> Excellent support across modern browsers, with easy fallback options for legacy environments. </div> </details> </div> </div> </div>While the <details> element works perfectly out of the box, this styled version demonstrates how it can be enhanced with CSS techniques while maintaining its native functionality. The beauty lies in its progressive enhancement - starting with semantic HTML, adding thoughtful styling, and preserving all built-in accessibility features.
Next time you reach for a JavaScript accordion, consider whether this native HTML element might serve your needs better. Sometimes the best solutions are already built-in!
P.S. — ::details-content just shipped. Style the content area without wrapper divs.