Accordions make navigating information-heavy pages easy. By using them, users can find specific information easily and then expand and collapse content sections with the click of a button (or an icon for that matter).
When you think of them, you probably picture JavaScript. But thanks to HTML5 we have the option to build them without scripts and hassle.
Let’s take a look at how to build a clean, semantic accordion using the <details> and <summary> elements.
Why Use <details> and <summary>?
The <details> and <summary> elements were designed to simplify user interaction and improve accessibility.
The <details> element acts like a container. Inside it, the <summary> on the other hand, plays the role of the clickable title that toggles visibility. The best part is that the browser handles everything, including behavior and styling. It offers interactive HTML functionality right away.
Basic Accordion Structure
A basic example is shown below:
That’s it. Clicking on “What is HTML?” reveals the paragraph. Add more <details> elements, and you’ve got a full accordion.
Some Styling Never Hurts
This is immediately usable as it is. For a touch of style, though, we are going to use some CSS:
A few lines beautifully enhance your layout’s aesthetic appeal. You can go further, of course—animations, icons, open-state styling—but simplicity is often enough.
Final Thoughts
HTML’s <details> and <summary> combination is surprisingly underutilized.
It’s perfect for FAQs, dropdown info, or even side notes in documentation. It loads fast, respects accessibility standards, and doesn’t rely on JavaScript. Sometimes the best solution is the simplest one—already waiting in the HTML toolbox.
Although my blog doesn’t support comments, feel free to reply via email or X.