Blog posts and wiki pages often have a Frequently Asked Questions (FAQs) section to summarize key points and to answer common user questions. And for that, using an accordion or a toggle is a common choice. W3Things uses it as well. You’ll find an FAQs section at the end of many articles, such as this one.
CSS frameworks like Bootstrap often provide an Accordion component out of the box, saving you time from creating one. But, what if you aren’t using Bootstrap? Or, what if you prefer to create a simple and lightweight accordion for your website, blog, or wiki page using native HTML and CSS without the JavaScript overhead?
Luckily, that’s what you'll learn in this tutorial, albeit with one important feature in mind — accessibility (often abbreviated as A11y).
Let’s get started!
The Setup
For this tutorial, I’ll create a blank project or web page. You can follow along or implement it into your existing project or website.
Step 1 — Adding the HTML Markup
Copy and paste the following code into a new HTML file (e.g., index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accessible Accordion</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="container">
<details>
<summary>Accordion 1</summary>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque velit
assumenda facilis molestias, itaque qui voluptatum labore a.
</p>
<p>
Eligendi quisquam dolore adipisci aperiam reiciendis placeat
praesentium labore doloribus? Nam repellat delectus sed beatae laborum
molestiae aperiam officiis?
</p>
</details>
<details>
<summary>Accordion 2</summary>
<p>
aspernatur repudiandae maiores et consequuntur! Iste, porro odit.
Cupiditate dicta totam maiores similique! Eaque odio, quo illum
eveniet neque quibusdam non optio enim minus ipsam laborum. Quae
obcaecati dolore animi, nulla atque culpa adipisci incidunt ex ipsam
nisi molestias labore at possimus libero deserunt alias. Doloremque
ratione ipsam magni iure sit quam.
</p>
</details>
<details>
<summary>Accordion 3</summary>
<p>
Error nobis culpa in cumque odit. Facilis necessitatibus et, excepturi
omnis amet illo sapiente voluptas aliquam incidunt rem vitae cum
alias, nam dolorum.
</p>
</details>
</div>
</body>
</html>
Most of the code should be self-explanatory. We're interested in the details and summary HTML tags inside the div with the container class.
Below is a short explanation of both elements if you’re new to them.
The HTML details Element
The HTML details element is a disclosure element or box with a visible summary (serving as a brief text or label). Clicking the summary opens or closes the entire details box.
Learn more about the details element on MDN.
The HTML summary Element
The HTML summary element is a short text or label for the details HTML element box. Clicking it toggles the state of the details parent element to open or closed.
Learn more about the summary element on MDN.
Step 2 — Adding the CSS Styles
Next, copy and paste the following code into a new CSS file (e.g., styles.css) and place it in the same folder as index.html:
details {
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.12);
> div,
> p {
margin: 0;
padding: 0 16px 16px;
}
&:not(:last-child) {
margin-bottom: 16px;
}
}
details[open] summary {
margin-bottom: 16px;
}
summary {
font-weight: 700;
cursor: pointer;
transition: all 150ms ease-in-out;
padding: 16px;
}
Most of the CSS styles should be self-explanatory. Although, pay attention to two parts:
- The bottom margin on the
summaryelement when thedetailselement is in the open state. - The transition property on the
summaryelement.
Together, they add a nice smooth animation when toggling the accordion to open or closed state.
Step 3 — Testing the Accordions or Toggles
Finally, let’s go ahead and test the accordions. Open the index.html file you created in step 1 in a browser.
Click on any accordion (the details element) to expand or collapse it, showing or hiding its content.
The best part? The accordions are accessible! You can use the keyboard’s Tab key to navigate to them and press the Enter or Space key to open or close them. And the accordions don't use the CSS display: none; property (not ideal for accessibility).
And what’s awesome is that these accordions are also completely responsive by default! You don’t need to add additional CSS to make them responsive on mobile devices. Although, depending on your use case or project, you may need to adjust some styles (e.g., padding or font size).
An Alternate or Open Source Accordion
I created an accordion a long time ago when I was first learning to code it myself. However, it doesn’t use the native details and summary elements, and it may be slightly less accessible than the one you saw in this article.
Notably, it uses a different animation technique (e.g., visibility and opacity) and you may find it more visually appealing.
You can check it out here (source code on GitHub) if you’re interested. Keep in mind that I haven’t updated it in a long time, so if there’s any issue (hopefully not) or feedback, please let me know! 🙂
Wrapping Up
That sums up our tutorial! You just learned how to create a simple accordion using only HTML and CSS along with an option of an open-source alternative if you prefer not to create one. ✨
Apart from being responsive and accessible, the accordion also renders and works flawlessly on all modern browsers, such as Chrome, Firefox, Safari, or Edge.
Have you used a different native and accessible approach than this one? If so, I’d love to know! Feel free to mention me on X (Twitter) @iamdanialzahid.
Learn More About Web Accessibility
Dive deep into web accessibility, its importance, and a web accessibility checklist to help ensure your website is accessible and user-friendly — Web Accessibility Best Practices.
Frequently Asked Questions for HTML Accordions
What is an accordion in HTML?
An accordion in HTML is simply a collapsible box or disclosure widget.
By default, a small text or summary is present when the accordion is closed. When opened (by clicking on it), it shows the full text or all elements (e.g., images or buttons).
What is the best HTML tag for accordion?
There is no best or worst HTML tag for an accordion. It depends on the use case and project requirements.
You may find that in some cases a div tag may be ideal over the native details and summary elements. On the other hand, the opposite may be appropriate in some cases (e.g., accessibility-compliant business websites).
Although, it's a best practice to always write code that's semantic and accessible for all users.
What is the difference between an accordion and a dropdown?
Put simply, an accordion acts as a collapsible box that shows or hides content inside when clicked.
On the other hand, a drop-down or drop-down menu (often associated with a navigation menu) shows text or content when hovered over or clicked.
