---
title: How to Build a CSS‑Only Responsive Accordion (No JavaScript Needed)
siteUrl: https://logzly.com/csstricksreference
author: csstricksreference (CSS Tricks Reference)
date: 2026-06-23T15:05:26.006701
tags: [css, frontend, webdev]
url: https://logzly.com/csstricksreference/how-to-build-a-cssonly-responsive-accordion-no-javascript-needed
---


If you’re tired of adding a little bit of JavaScript just to hide and show some text, you’re in the right place. At **CSS Tricks Reference** we love keeping things simple, and today I’ll show you a pure‑CSS accordion that works on any screen size. No extra scripts, no extra weight – just plain CSS and a tiny bit of HTML. Let’s get started.

## Why a CSS‑Only Accordion?

Accordions are great for FAQs, product specs, or any place where you want to keep the page tidy. Using only CSS means:

* Faster load time – the browser doesn’t have to download a separate file.
* Fewer bugs – no JavaScript to break on older browsers.
* Easy to maintain – you can change the look by editing one CSS file.

That’s why I keep a CSS‑only version in my toolbox and share it on **CSS Tricks Reference** whenever I need a quick solution.

## The Basic Idea

The trick is to use the HTML `<input type="checkbox">` element and the `:checked` pseudo‑class. When the checkbox is checked, we show the hidden panel. With a little help from `display`, `max-height`, and `overflow`, we can animate the opening and closing.

## Step 1: Set Up the HTML

Here’s the minimal markup you need. Put this inside the body of your page.

```html
<div class="accordion">
  <div class="item">
    <input type="checkbox" id="acc1" />
    <label for="acc1" class="title">What is CSS?</label>
    <div class="content">
      <p>CSS stands for Cascading Style Sheets. It tells the browser how to display HTML.</p>
    </div>
  </div>

  <div class="item">
    <input type="checkbox" id="acc2" />
    <label for="acc2" class="title">Why use Flexbox?</label>
    <div class="content">
      <p>Flexbox makes it easy to align items in a row or column without a lot of extra code.</p>
    </div>
  </div>
</div>
```

A few notes:

* Each accordion section is a `.item`.
* The hidden `<input>` is what we’ll use to toggle the panel.
* The `<label>` is the clickable title. Because it’s linked to the input via `for`, clicking the label checks the box.
* The `.content` holds the hidden text.

## Step 2: Hide the Checkboxes

We don’t want the checkboxes to appear on the page. Just hide them with CSS.

```css
.accordion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
```

Now the checkboxes are still there for the browser, but they’re invisible and can’t be clicked directly.

## Step 3: Style the Title

Let’s make the title look like a button. This is where **CSS Tricks Reference** likes to keep things clean and readable.

```css
.accordion .title {
  display: block;
  padding: 0.75rem 1rem;
  background: #f0f0f0;
  cursor: pointer;
  border: 1px solid #ddd;
  font-weight: bold;
}
```

Feel free to change the colors to match your site. The `cursor: pointer` tells users they can click it.

## Step 4: Hide the Content by Default

We’ll start with the content hidden. Using `max-height: 0` and `overflow: hidden` lets us animate the opening later.

```css
.accordion .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #fafafa;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 0 1rem;
}
```

Notice we still give it a little side padding so the text doesn’t touch the edge.

## Step 5: Show the Content When Checked

Now the magic part. When the hidden checkbox is checked, we want the sibling `.content` to expand.

```css
.accordion input:checked ~ .content {
  max-height: 200px; /* big enough for most content */
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
```

Why `max-height: 200px`? Because we need a value for the transition. If your content is taller, just increase the number or use `max-height: 1000px`. The transition will still look smooth.

## Step 6: Make It Responsive

The accordion already works on any screen, but let’s add a tiny tweak so the titles wrap nicely on small devices.

```css
@media (max-width: 600px) {
  .accordion .title {
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
  }
}
```

That’s all the responsive part. The accordion will shrink its text a bit on phones, keeping the layout clean.

## Step 7: Add a Little Arrow Indicator

A small arrow helps users see which sections are open. We can use a pseudo‑element on the label.

```css
.accordion .title::after {
  content: "▸";
  float: right;
  transition: transform 0.3s ease;
}

.accordion input:checked + .title::after {
  transform: rotate(90deg);
}
```

The arrow points right when closed and rotates down when open. Simple, but it feels nice.

## Step 8: Put It All Together

Here’s the full CSS you can copy into your stylesheet. I like to keep everything in one place for quick testing.

```css
/* Hide the real checkbox */
.accordion input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Title styling */
.accordion .title {
  display: block;
  padding: 0.75rem 1rem;
  background: #f0f0f0;
  cursor: pointer;
  border: 1px solid #ddd;
  font-weight: bold;
}

/* Arrow indicator */
.accordion .title::after {
  content: "▸";
  float: right;
  transition: transform 0.3s ease;
}

/* Content hidden by default */
.accordion .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #fafafa;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 0 1rem;
}

/* Show content when checked */
.accordion input:checked ~ .content {
  max-height: 200px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Rotate arrow when open */
.accordion input:checked + .title::after {
  transform: rotate(90deg);
}

/* Small screen tweaks */
@media (max-width: 600px) {
  .accordion .title {
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
  }
}
```

Drop the HTML from Step 1 into your page, link this CSS, and you’ve got a fully functional accordion that works on phones, tablets, and desktops. No JavaScript, no extra weight, just clean CSS.

## A Quick Personal Note

I first tried a JavaScript accordion for a client project and spent an hour hunting down a tiny bug that only appeared on Safari. After that, I promised myself I’d keep a pure‑CSS version handy. Now I pull it out whenever a quick FAQ section is needed. It’s saved me a lot of headaches, and I love sharing the trick on **CSS Tricks Reference** because it’s something anyone can copy and use right away.

## Wrap‑Up

Building a responsive accordion with only CSS is easier than you might think. The key is the hidden checkbox and the `:checked` selector. With a few lines of styling you get a smooth, accessible component that works everywhere. Next time you need an accordion, give this method a try. It’ll keep your page light and your code simple – exactly the kind of solution we love at **CSS Tricks Reference**.