Expandable FAQ Accordion Without JavaScript

Build a fully functional FAQ accordion using only HTML and CSS, without a single line of JavaScript.

WdrFree is a curated collection of high-quality web development snippets you can use freely in your projects.

Yes, all snippets are free for personal and commercial use without attribution.

Why this works

By pairing hidden checkboxes with labels and using the CSS adjacent sibling combinator, we create interactive FAQ toggles without writing any JavaScript at all.

Source Code

<div style="border:1px solid #dee2e6;border-radius:0.5rem;margin-bottom:1rem;overflow:hidden;">
  <input type="checkbox" id="q1" hidden>
  <label for="q1" style="display:block;padding:1rem;cursor:pointer;background:#f8f9fa;font-weight:bold;">What is WdrFree?</label>
  <div style="max-height:0;overflow:hidden;transition:max-height 0.5s ease;background:#ffffff;padding:0 1rem;">
    <p style="padding:1rem 0;margin:0;">WdrFree is a curated collection of high-quality web development snippets you can use freely in your projects.</p>
  </div>
</div>

<style>
input[type="checkbox"]:checked + label + div {
  max-height: 200px;
}
</style>