← All elements
<div class="faq"><details open><summary>What is pure CSS?</summary><p>Styling and behaviour that need no JavaScript at all.</p></details><details><summary>Is it accessible?</summary><p>Native elements keep keyboard and screen reader support for free.</p></details><details><summary>Does it work offline?</summary><p>Yes. It is only HTML and CSS.</p></details></div>About this accordion
A keyboard-friendly accordion made from native details and summary elements, with a rotating plus icon.
How it works
Each question is a native details element with a summary as its heading. The browser handles opening, closing and keyboard use. The CSS removes the default marker, draws a plus sign with ::after, and rotates it by 135 degrees when the details has the open attribute, turning it into a cross.
Ways to customise it
- Change the colours on summary and the card background.
- Replace the plus with a chevron by changing the ::after content and rotation.
- Add the open attribute to any details to make it start expanded.
Good to know
Native details elements are keyboard accessible and announced correctly by screen readers, which is why they beat checkbox hacks for FAQs. Search engines can also read the hidden answers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.