Accordions with details and summary

Despite its limitations, <details> is a good choice. It’s native accordion-like behaviour saves you from reinventing the wheel and is widely supported in modern browsers.

It is a great option if you need an interactive component to hide some additional content for people to read later.

If you want to add some interactive content to your website without the hassle of custom scripts, this is a fantastic solution!

<details>
	<summary aria-expanded="true/false" tabindex="0" role="button">
		Text that summarises the rest of the content
	</summary>

	<p>
		Some detailed text for the user to read. It should be hidden by default, but will become visible
		when the user interacts with the summary element.
	</p>
	<p>Multiple paragraphs and other elements are allowed.</p>
</details>

But keep in mind. This is not a real accordion. You can read more about this topic in Adrian Roselli’s Blogpost “Details / Summary Are Not [insert control here]”