Pure Responsive CSS Accordion Tutorial: Interactive, Fast & No JS!

Avatar photoByAdil

Accordions are a neat way to organize and hide content, perfect for FAQs, Menus, or any interactive sections on websites. Usually, people use JavaScript, but you can make a fully functional, responsive accordion with just HTML and CSS.

I’ve created a simple accordion using hidden checkboxes and CSS selectors—no JavaScript needed! Want to see and play with the full working code?

How It Works — The Basics

Here’s the core structure: 

<div class="accordion">
  <input type="checkbox" id="section1" class="accordion-input" />
  <label for="section1" class="accordion-label">Section 1 Title</label>
  <div class="accordion-content">
    <p>This is where your content goes, like text, images, or anything else.</p>
  </div>
</div>

  • The hidden checkbox toggles the open/closed state.

  • The label is clickable to toggle that checkbox.

  • When the checkbox is checked, CSS shows the content div.

And the key CSS concept is this selector that reveals content only when checked: 

.accordion-input:checked ~ .accordion-content {
  max-height: 500px;
  padding: 1em;
  overflow: visible;
}

Why Choose This Method?

  • No JavaScript means faster loading and simpler maintenance.
  • Works smoothly on all modern browsers and devices.
  • Fully responsive with adaptable font sizes and paddings.
  • Accessible with proper label-input linking.

Explore and Customize

Feel free to browse the demo, fork it, and tweak styles or content to suit your projects. Copying the code from CodePen is easy, and since it’s pure HTML and CSS, you can integrate it anywhere.

Check out and play with the full live demo on CodePen:

Similar Posts