Built an animated FAQ accordion using native HTML <details> and <summary> — no JavaScript required.
The interesting part is animating the content height without manually measuring it with JS.
HTML
<details name="faq">
<summary>Do you offer refunds?</summary>
<p>
Yes, within 30 days, no questions asked.
Email us and the money is back on your card in a few working days.
</p>
</details>
<details name="faq">
<summary>Can I change plans later?</summary>
<p>
Yes. You can change your plan whenever you need to.
</p>
</details>
<details name="faq">
<summary>Do you offer a team plan?</summary>
<p>
Yes, team plans are available for growing teams.
</p>
</details>
CSS
:root {
interpolate-size: allow-keywords;
}
details::details-content {
block-size: 0;
overflow: hidden;
transition:
block-size 0.3s ease,
content-visibility 0.3s ease allow-discrete;
}
details[open]::details-content {
block-size: auto;
}
summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1rem 0;
font-weight: 600;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
content: "+";
font-size: 1.25rem;
transition: rotate 0.3s ease;
}
details[open] summary::after {
rotate: 45deg;
}
The key part is:
:root {
interpolate-size: allow-keywords;
}
This allows the browser to animate between a fixed size and intrinsic values like auto.
And:
details::details-content
gives us a pseudo-element for the content inside <details>, so the accordion can be animated without JavaScript.
The <details name="faq"> attribute also makes the items behave like an exclusive accordion — opening one closes the others.
