← All elements
<div class="pm"><details><summary>Is it free?</summary><p>Yes, every element can be copied at no cost.</p></details><details open><summary>Do I need JavaScript?</summary><p>No. Everything is plain HTML and CSS.</p></details></div>About this accordion
Questions that open on click, with a plus icon that rotates into a minus and a smooth height change.
How it works
Each question is a details element. The native marker is hidden, and two bars form a plus using pseudo-elements. When the details is open the vertical bar rotates to match the horizontal one, leaving a minus.
Ways to customise it
- Change #6366f1 for another icon colour.
- Add the name attribute to make only one open at a time.
- Add more questions.
Good to know
details and summary provide keyboard and screen reader behaviour for free. Keep the summary text a clear question.
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.