You don’t need JavaScript to build a fully accessible and collapsible Accordion! By utilizing HTML’s native <details> and <summary> tags, we can create one entirely driven by CSS.

The HTML Structure

<details class="acc">
  <summary class="acc-header">What is HTML?</summary>
  <div class="acc-body">
    <p>HTML stands for HyperText Markup Language. It gives structure to web pages.</p>
  </div>
</details>

Styling the Summary

details summary {
  cursor: pointer;
  padding: 15px;
  background: white;
  border-radius: 8px;
  list-style: none; /* removes default arrow */
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
details[open] summary {
  background: #f3f4f6;
  border-radius: 8px 8px 0 0;
}

Check out the Live Demo to see a clean, hardware-accelerated CSS accordion!