Accordion Generator
Generate native collapsible sections with details and summary. Open by default optional. No JavaScript required.
Native collapsible section - no JavaScript needed.
Live preview
What is included?
Every generator on this site is free to use.
<details>
<summary>What is included?</summary>
<p>Every generator on this site is free to use.</p>
</details>About the accordion generator
The details element gives you a collapsible section with no JavaScript at all. The summary is the clickable heading; everything else inside is the panel. Keyboard support, focus handling and screen reader announcements all come for free.
It is also searchable in modern browsers, which a JavaScript accordion usually is not.
How to use it
- 1Write the summary text, which is the visible heading.
- 2Write the content.
- 3Mark it open if it should start expanded.
- 4Copy the HTML.
Questions
Do I need JavaScript for this?
No. Opening and closing, keyboard support and accessibility are all built in.
Can I animate the open and close?
Partly. Modern browsers can animate the height with interpolate-size and calc-size, and there is a CSS-only trick using a grid row. Full smooth animation still often needs a little JavaScript.
How do I style the arrow marker?
Use summary::marker, or set list-style: none and draw your own indicator with a pseudo-element.