To build the markup for an HTML accordion, use the
<details> element. Use a
<summary> tag to provide the title for the accordion. Add your content, and you're done!
<p>Here is the content!</p>
By default, the
<details> element loads in a closed state, and I always prefer to not hide content from readers when the page loads. We can load the accordion open by default by adding the
open attribute to the
<details> element. Perfect!
<p>Here is the content that is open by default!</p>
Readers can click to close the accordion to minimise clutter if they so wish — especially when on a mobile device.
At the time of writing this article, there's full modern browser support for the details element as reported by caniuse.com, apart from Internet Explorer (obviously!) and Opera.
I also confirmed that the
<details> element is keyboard-accessible in Chromium, Firefox and Safari. Tab to the element and use space or enter to open and close.