Every FAQ section and our entire interview question bank runs on two tags and zero JavaScript.
The whole component
<details> <summary>What is the pass mark?</summary> <p>50/100 combining internal and external assessment.</p> </details> <!-- exclusive group — opening one closes others (modern browsers) --> <details name="faq">...</details> <details name="faq">...</details>
Styling it properly
summary { cursor: pointer; list-style: none; } /* remove default arrow */
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; }
details[open] summary::after { content: "−"; }
details[open] p { animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } }Why it beats JS accordions
- Keyboard + screen-reader accessible automatically
- Content is in the DOM → Google indexes your answers (JS accordions often hide theirs)
- Works with JS disabled, weighs nothing
Find-in-page (Ctrl+F) even auto-opens matching closed details in Chrome.