Use the HTML details element
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>
Load the open accordion by default
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.
Browser support and accessibility
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.