Vanta Logo
SPONSOR
Automate SOC 2 & ISO 27001 compliance with Vanta. Get $1,000 off.
Up to date
Published
2 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

HTML Details Element: The Native Accordion You're Not Using

Discover how the HTML details element can replace your JavaScript accordions and why it might be better than your current solution

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.

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:


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
The <details> element shines when building documentation, FAQs, or navigation menus.
What is the details element?
A native HTML element that creates expandable widgets without requiring JavaScript. Perfect for accordions, FAQs, and collapsible sections.
Why use it?
Built-in accessibility, keyboard navigation, and state management make it a robust choice compared to custom JavaScript solutions.
Browser support?
Excellent support across modern browsers, with easy fallback options for legacy environments.

Code implementation with Tailwind

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!


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.

Interested in supporting this blog in exchange for a shoutout? Get in touch.


Liked this post?

Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
4 min read

The What, Why, and How of Using a Skeleton Loading Screen

Skeleton loading screens enhance user experience and make your app feel faster

Nov 12, 2020
Read article
Webdev
8 min read

Become a Web Developer in 180 Days

A comprehensive roadmap to becoming a proficient web developer

Oct 29, 2019
Read article
Webdev
8 min read

Invisible columns in SQL

It’s a small feature, but it can make a big difference.

Aug 26, 2024
Read article
Webdev
3 min read

Improve PageSpeed Insights Score with Lazy Loading Iframes

How to save bandwidth and speed up your site by lazy-loading iframes

Sep 13, 2024
Read article
Webdev
12 min read

Robust Data Fetching Architecture For Complex React/Next.js Apps

How I use the 'Three Layers of Data' architecture pattern for React and Next.js apps to avoid common pitfalls, tech debt, and improve performance

May 4, 2025
Read article
Webdev
12 min read

Frontend Security Checklist

Tips for Keeping All Frontend Applications Secure

Jul 30, 2024
Read article
Webdev
4 min read

Speed Up Your Website With rel='preconnect' and increase PageSpeed Insights Score

Using link rel='preconnect' can improve your website's performance by reducing connection setup times to key external domains.

Sep 13, 2024
Read article
Webdev
3 min read

The HTML Native Search Element

The search HTML element is a container that represents the parts of the web page with search functionality

Dec 2, 2024
Read article
Webdev
5 min read

Add Auth to Astro 5 with Clerk in 5 Minutes

The simplest setup for adding Clerk authentication to your Astro project, with minimal code

Dec 18, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/html-details-element. It was written by a human and polished using grammar tools for clarity.