How Pure CSS Accordions Actually Work (No JavaScript Required)

Toggling visibility usually sounds like a job for JavaScript — but CSS has a couple of genuine, well-supported ways to do it without a single line of script.

Technique 1: The Native <details> and <summary> Elements

HTML5 includes a built-in disclosure widget purpose-built for exactly this: <details> wraps the section, and <summary> defines the always-visible clickable header. The browser handles the show/hide behavior natively — no CSS trickery required at all for the basic functionality, though CSS is still used to style it to match your design.

<details>
  <summary>What is a pure CSS accordion?</summary>
  <p>An expandable section built with plain HTML and CSS, no JavaScript needed.</p>
</details>

Technique 2: The Checkbox Hack

Before <details> had reliable browser support, developers used a clever workaround: pair a hidden checkbox input with a <label>, then use CSS's :checked pseudo-class combined with a sibling selector to control the visibility of the content that follows.

<input type="checkbox" id="section1" class="accordion-toggle">
<label for="section1">Click to expand</label>
<div class="accordion-content">Hidden content here</div>

/* CSS */
.accordion-content { max-height: 0; overflow: hidden; }
.accordion-toggle:checked ~ .accordion-content { max-height: 500px; }

Clicking the label toggles the checkbox's checked state (since the for attribute links them), and the CSS sibling selector responds to that state change by adjusting the content's visibility — all without any script.

Which Technique Is "Better"

<details>/<summary> is the more modern, semantic choice — it has built-in accessibility behavior and requires less markup. The checkbox hack offers more fine-grained styling control in some cases (since you're not working within a native element's built-in behavior) but requires more markup and a bit more care to keep accessible. Both are genuinely "no JavaScript" solutions; the right one depends on how much custom styling control you need versus how much you value simplicity.