Accordions are one of the most useful UI patterns on the web. They help you pack lots of content into compact spaces, guide users through FAQs, and organize long-form information. The good news? You don’t need JavaScript to build one. In this tutorial, we’ll walk you through how to create a CSS only accordion using two proven techniques: the native <details> and <summary> elements, and the classic checkbox hack.
At Fat Cow Web Design, we believe in leaner, faster websites. Cutting JavaScript where you can means better performance, better accessibility defaults, and fewer bugs. Let’s dig in.
Why Choose a CSS-Only Accordion?
Before we jump into the code, let’s talk about why going JavaScript-free is often the smarter choice for accordions:
- Performance: No extra scripts to download, parse, or execute.
- Reliability: Works even if JavaScript fails or is disabled.
- Accessibility: The native
<details>element comes with built-in keyboard and screen reader support. - Maintainability: Less code means fewer things to break.
- SEO: Search engines can crawl the content inside collapsed sections easily.
Method 1: The Native HTML Approach with details and summary
This is by far the most modern, accessible, and recommended way to build a CSS only accordion in 2026. The <details> and <summary> elements are supported in every major browser and handle keyboard interactions, ARIA semantics, and toggle logic natively. timothyricks.com goes into the numbers.
Basic HTML Structure
<div class="accordion">
<details>
<summary>What is a CSS-only accordion?</summary>
<p>It's an expandable UI component built entirely with HTML and CSS, no JavaScript required.</p>
</details>
<details>
<summary>Is it accessible?</summary>
<p>Yes! The native details element ships with keyboard support and proper ARIA semantics.</p>
</details>
<details>
<summary>Does it work on all browsers?</summary>
<p>All modern browsers support it, including Chrome, Firefox, Safari, and Edge.</p>
</details>
</div>Styling It Nicely
.accordion details {
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 0.5rem;
overflow: hidden;
background: #fff;
}
.accordion summary {
padding: 1rem 1.25rem;
font-weight: 600;
cursor: pointer;
list-style: none;
position: relative;
transition: background 0.2s ease;
}
.accordion summary::-webkit-details-marker {
display: none;
}
.accordion summary::after {
content: "+";
position: absolute;
right: 1.25rem;
font-size: 1.5rem;
transition: transform 0.2s ease;
}
.accordion details[open] summary::after {
content: "−";
}
.accordion summary:hover {
background: #f7f7f7;
}
.accordion details p {
padding: 0 1.25rem 1rem;
margin: 0;
color: #555;
}Making it Exclusive (Only One Open at a Time)
Since 2024, all major browsers support the name attribute on <details>. Adding the same name to multiple details elements turns them into an exclusive accordion group, just like radio buttons.
<div class="accordion">
<details name="faq">
<summary>Question 1</summary>
<p>Answer 1</p>
</details>
<details name="faq">
<summary>Question 2</summary>
<p>Answer 2</p>
</details>
<details name="faq">
<summary>Question 3</summary>
<p>Answer 3</p>
</details>
</div>Animating the Open and Close
Historically, animating <details> was painful because height: auto couldn’t be transitioned. Thanks to interpolate-size: allow-keywords and ::details-content, we can now animate smoothly using pure CSS. prismic.io walks through the specifics.
:root {
interpolate-size: allow-keywords;
}
.accordion details::details-content {
opacity: 0;
height: 0;
overflow: hidden;
transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s;
transition-behavior: allow-discrete;
}
.accordion details[open]::details-content {
opacity: 1;
height: auto;
}For older browsers, this gracefully degrades to an instant open and close, still fully functional.
Method 2: The Checkbox Hack
Before <details> matured, developers used the checkbox hack to fake toggle behavior in CSS. It still works and can be useful when you need finer visual control, but it’s less accessible out of the box.
The HTML
<div class="cbx-accordion">
<div class="cbx-item">
<input type="checkbox" id="item-1">
<label for="item-1">Section One</label>
<div class="cbx-content">
<p>Content for section one goes here.</p>
</div>
</div>
<div class="cbx-item">
<input type="checkbox" id="item-2">
<label for="item-2">Section Two</label>
<div class="cbx-content">
<p>Content for section two goes here.</p>
</div>
</div>
</div>The CSS
.cbx-accordion input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.cbx-accordion label {
display: block;
padding: 1rem 1.25rem;
background: #f4f4f4;
font-weight: 600;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
.cbx-accordion .cbx-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.cbx-accordion input:checked ~ .cbx-content {
max-height: 500px;
}
.cbx-accordion input:focus-visible + label {
outline: 2px solid #0066ff;
outline-offset: 2px;
}Important accessibility note: If you use this method, always keep the checkbox in the DOM (not display: none) and provide a visible focus state so keyboard users can navigate.
Comparing the Two Methods
| Feature | details / summary | Checkbox Hack |
|---|---|---|
| Accessibility | Excellent (native) | Requires manual work |
| Keyboard support | Built-in | Needs focus styles |
| SEO friendly | Yes | Yes |
| Exclusive mode | Yes (name attribute) | Use radio inputs instead |
| Animation | Modern CSS supports it | Easy via max-height |
| Code complexity | Low | Medium |
Accessibility Best Practices
An accordion that looks great but excludes users is a failure. Here are the essentials to get right:
- Prefer semantic HTML: Use
<details>and<summary>whenever possible. - Visible focus states: Always style
:focus-visibleon interactive elements. - Descriptive labels: Summaries should clearly describe the content that will expand.
- Sufficient color contrast: Meet WCAG AA at minimum (4.5:1 for text).
- Respect motion preferences: Wrap animations in
@media (prefers-reduced-motion: no-preference). - Touch targets: Summary and label areas should be at least 44×44 pixels for mobile users.
Reduced Motion Example
@media (prefers-reduced-motion: reduce) {
.accordion details::details-content,
.cbx-accordion .cbx-content {
transition: none;
}
}
When to Reach for JavaScript Instead
CSS-only accordions are perfect for most use cases, but there are scenarios where JavaScript adds real value:
- You need to track analytics events when a section opens.
- You want deep linking to a specific open section via URL hash.
- You need to load content dynamically when a section expands.
- You require complex state management across multiple accordions on the page.
For everything else, stick with CSS. Your users’ devices will thank you.
Frequently Asked Questions
Is a CSS-only accordion good for SEO?
Yes. The content inside collapsed sections is fully present in the HTML, so Google and other search engines can crawl and index it without issues.
Can I animate the height of a details element with pure CSS?
Yes. As of 2025, thanks to interpolate-size: allow-keywords and the ::details-content pseudo-element, you can smoothly animate from height zero to auto without JavaScript. mozilla.org walks through the specifics.
Which method should I choose in 2026?
Use <details> and <summary> in almost every case. The checkbox hack is now mostly a legacy technique or a niche solution for specific visual requirements.
How do I make only one section open at a time?
Add the same name attribute to each <details> element. Browsers will treat them as an exclusive group automatically.
Do CSS-only accordions work on mobile?
Absolutely. Both methods work perfectly on iOS and Android browsers. Just make sure your tap targets are large enough for comfortable touch interaction.
Wrapping Up
Building a CSS only accordion in 2026 is easier than ever. The native <details> and <summary> elements give you accessibility, semantics, and now smooth animations for free. Reserve JavaScript for cases where you genuinely need it, and your sites will load faster and behave more predictably for everyone.
Need help implementing accessible, high-performance components on your website? The team at Fat Cow Web Design specializes in fast, lean, standards-based web design. Get in touch and let’s build something great together.
