Accordions are UI components that allow you to organize content into sections that expand or collapse when users interact with them, typically by clicking. Common use cases include FAQs, navigation menus, product filters, and mobile layouts where screen space is limited.

They help you present information in a structured, user-friendly way while keeping pages clean and easy to scan.

In this article, you’ll learn how to create accordions using just CSS. We’ll cover various approaches, including using the <details> and <summary> components, as well as working with CSS Flexbox and Grid.

Benefits of accordions in websites

Accordions offer several advantages that make them a popular choice for organizing content on websites:

• Space-saving design: Accordions enable you to hide content from view, reducing the amount of visible information and keeping layouts tidy.
• Improved focus: Users can open only the sections they’re interested in, making information easier to digest.
• Interactive experience: The expand-and-collapse behavior feels intuitive and has become a standard way of presenting grouped content online.
• Mobile responsiveness: Works especially well on smaller screens where space is limited and you can’t display all content at once.
• Versatility: They’re great for FAQs, product filters, step-by-step instructions, navigation menus, and more.

Different ways of building CSS accordions

There are several ways to build a CSS accordion, each offering different levels of simplicity, customization, and control. Let’s explore some of the most common approaches.

For this section, the :target, Flexbox, and Grid approaches will use the HTML structure below:

Using <details> and <summary>

The <details> and <summary> elements provide a native, browser-supported method for creating collapsible sections. They require no JavaScript and work well for simple use cases, such as FAQs.

This approach is the fastest and most straightforward way to create an accordion. It comes with built-in browser behavior, requires little CSS, and has good accessibility support by default.

Explore the pen for this method:

Using the :checked selector

This method works by pairing a hidden checkbox with a label. When the user clicks the label, the checkbox switches to a checked state, which you can target in CSS using the :checked pseudo-class. This allows you to reveal or hide the accordion content without any JavaScript. It’s simple, flexible, and lets you add smooth transitions for a better user experience.

This method gives you full control over the accordion’s design and behavior while staying JavaScript-free.

Here’s the pen for this method:

Using :target

:target is great when you want to link directly to a specific accordion section from a URL. It’s simple to set up and doesn’t require additional input elements like checkboxes. The :target pseudo-class toggles visibility based on the active URL hash (e.g., #accordion1).

Here’s the pen for this method:

Using CSS Flexbox

CSS Flexbox doesn’t create the toggle effect by itself, but is great for aligning headers, icons, and content neatly. You can combine Flexbox with the :checked or <details> method for structure.

Here’s the pen for this method:

Using CSS Grid

CSS Grid is another way to structure accordion content, especially if you want more complex layouts within each section.

Here’s the pen for this method:

CSS accordion examples

We’ve seen different methods for implementing accordions. Now, let’s check out some examples.

Pure CSS accordion

Raúl Barrera’s pen showcases two sets of accordions. The first is built with the checkbox input and the second with radio.

CSS + HTML only accordion element

Alex Bergin’s accordion is also built with the checkbox input. It includes subtle animations that elevate the interaction when the accordion items open and close.

Pure CSS horizontal accordion

Aysha Anggraini's accordion switches axes and is horizontal instead of vertical. When users hover over the items, they expand to reveal the hidden within.

Funky pure CSS accordion

If you prefer an accordion that’s full of wild transitions and bright colors, then you’ll enjoy Jamie Culter’s pen.

Awesome accordion menu using only HTML & CSS

Ahmad Emran’s pen is another creative, colorful codepen with eye-catching effects.

Final thoughts

In this article, we’ve explored how CSS accordions can improve content organization. By combining clean HTML with modern CSS properties, you can build accordions that are both lightweight and user-friendly.

Don’t forget to test for accessibility and responsiveness to ensure a smooth experience across all devices.

FAQs