HTML accordion with details and summary — no JavaScript needed

How to use the details accordion generator

1. In Items (blank line between items; first line is the title), write the question or heading on the first line and the content below it.
2. Leave a blank line before the next item.
3. Tick First item open if the first panel should start expanded.
4. Tick Only one open at a time (name attribute) for an exclusive accordion and set the Group name.
5. Copy the code and click the items in the Preview.

What it does and when to use it

FAQs, product specifications, long terms and conditions and step-by-step help often need to be scannable: a list of headings that open on demand. The HTML details element does this natively. Its first child, summary, is the always-visible heading, and everything after it is shown when the item is opened.

Because the browser handles opening and closing, there is no script to load, nothing breaks if JavaScript fails, and keyboard and screen-reader support comes built in. The open state can also be styled with details[open] in CSS.

Use Schema.org JSON-LD to describe a genuine FAQ for search engines. If your content is a glossary of terms rather than questions, a definition list may suit it better. To put a list inside an answer, build it with the HTML List Generator and paste it after the summary.

How it works

The text is split into blocks at blank lines. In each block, the first non-empty line becomes the summary, and every following line becomes its own p. The open attribute goes on the first item only when First item open is ticked. With the exclusive option, each details gets name="your-group"; if the group name is empty, accordion is used. All text is HTML-escaped. It runs in your browser.

Worked examples

The default FAQ, first item open:

<details open>
  <summary>Do my files get uploaded?</summary>
  <p>No. Every tool runs in your browser.</p>
</details>

The other two items follow without open.

A shipping accordion, one item at a time. Two items, group name shipping, first item closed. The first item has two content lines, so it gets two paragraphs:

<details name="shipping">
  <summary>How long does delivery take?</summary>
  <p>3–5 working days.</p>
  <p>Orders before 14:00 ship the same day.</p>
</details>

Empty input. A box with only spaces returns “Add at least one item: a title line followed by its content.”

Limits and tips

• Keep summaries short; they work as headings and are read out in full each time.
• Do not put another interactive element, such as a link or button, inside the summary itself.
• Exclusive accordions close items automatically, which can surprise people who want to compare two answers. Use it only when the items are truly alternatives.