HTML Details Generator

Build collapsible sections and FAQ accordions with native HTML.

name (exclusive accordion group, optional)

First item open by default

Generate CSS

Items (first line = summary, following lines = content, blank line between items)

HTML

<details open>
  <summary>What is the details element?</summary>
  <p>A native disclosure widget that shows or hides content without JavaScript.</p>
</details>
<details>
  <summary>Is it accessible?</summary>
  <p>Yes. Browsers expose it as a button with an expanded state to screen readers.</p>
</details>

CSS

details {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}

summary {
  cursor: pointer;
  font-weight: 600;
}

details[open] summary {
  margin-bottom: 8px;
}

HTML Details Generator

The <details> element creates a native disclosure widget: a clickable <summary> heading that shows or hides the content below it. It is the simplest way to build FAQ sections, accordions, spoilers and "read more" boxes without any JavaScript, and it is accessible by default. The HTML Details Generator turns a simple list of questions and answers into clean markup with optional styling.

How to use it

Type your items in the text box: the first line of each block is the summary, the following lines are the content, and a blank line separates items. Paragraph breaks inside the content become separate paragraphs. Then choose:

First item open – adds the open attribute so the first section is expanded on page load.
name (exclusive accordion) – give every item the same group name and browsers will keep only one section open at a time.
Generate CSS – adds a border, padding and a pointer cursor so the accordion looks tidy immediately.

Why native details?

Custom JavaScript accordions often forget keyboard support or ARIA states. <details> exposes the expanded/collapsed state to assistive technology automatically, works when JavaScript is disabled, and supports the browser's find-in-page feature, which can open a closed section to reveal a match.

Ideas

Use it for FAQ pages (combine it with FAQ structured data), changelogs, long code samples, product specifications or spoiler warnings. To show a modal message instead of inline content, use the HTML Dialog Generator; to write content first in Markdown, try the Markdown to HTML converter.

Frequently Asked Questions

Do details elements need JavaScript?

No. Opening and closing is built into the browser, including keyboard support with Enter and Space. JavaScript is only needed if you want to react to the toggle event.

How do I make only one item open at a time?

Give all details elements the same name attribute. Modern browsers then treat them as an exclusive accordion: opening one closes the others. Older browsers simply ignore the attribute and allow several open items.

Is content inside a closed details element indexed by Google?

Yes. The content is in the HTML source, so search engines can read it. Google has stated that content hidden in expandable sections is indexed normally, especially on mobile.

How do I change the arrow marker?

Style summary::marker or set list-style: none on summary and add your own icon with ::before. The details[open] selector lets you rotate the icon when the section is expanded.