Collapsible Section Generator (HTML details)
Free collapsible section generator. Create HTML details/summary blocks for GitHub markdown and accordions for web pages, with live preview and copy.
<details>
<summary>How do I install it?</summary>
Run `npm install acme-kit` and import it:
```js
import { kit } from "acme-kit";
```
</details>
<details>
<summary>Does it work offline?</summary>
Yes. Everything runs in the browser and nothing is uploaded.
</details><details> <summary>How do I install it?</summary>
Run npm install acme-kit and import it:
import { kit } from "acme-kit";
</details>
<details> <summary>Does it work offline?</summary>
Yes. Everything runs in the browser and nothing is uploaded.
</details>
<details> is supported by GitHub, GitLab, Bitbucket, Docusaurus, MkDocs and every browser. In GitHub-safe mode a blank line follows <summary> so the body is parsed as markdown.
What Is an HTML Collapsible Section?
An html collapsible section is a block of content hidden behind a clickable heading, built with the <details> and <summary> elements that every modern browser supports natively. Because it is plain HTML, the same block works inside markdown on GitHub, GitLab and docs sites, where it is the only way to make a github collapsible section without a plugin. This generator writes the markup for one or several sections, previews it with a real <details> element, and handles the blank-line rule that trips up most people.
Everything is generated in your browser; nothing is uploaded.
How to Create a Collapsible Section
- Choose GitHub-safe markdown for READMEs and wikis, or Pure HTML for web pages.
- Type the summary (the always-visible heading) and the body. In GitHub mode the body is markdown; in HTML mode it is text or HTML.
- Tick Open for any section that should start expanded.
- Click Add section to build an accordion of several blocks, and remove ones you do not need.
- Check the live preview, then copy or download the output.
Collapsible HTML Syntax Reference
| Element or attribute | Purpose |
|---|---|
| <details> | The collapsible container; closed unless it has the open attribute. |
| <summary> | The visible label; must be the first child. |
| open | Boolean attribute that starts the section expanded. |
| name="group" | Newer browsers close other details with the same name, giving exclusive accordion behaviour. |
| blank line after </summary> | Required for GitHub to render markdown inside the body. |
The collapsible html produced in GitHub mode is deliberately minimal, since GitHub removes class and style attributes. HTML mode adds an optional wrapper <div class="accordion"> and inline styles so the accordion looks finished on a page without a stylesheet.
Collapsible List HTML and Nested Blocks
A collapsible list html pattern is just several <details> blocks in a row, which is how FAQ sections and long changelogs are usually done on GitHub. Each block toggles independently. To make one section reveal sub-sections, nest a <details> inside another; the nested example on the page shows the structure, including the blank lines needed for markdown bodies. Keep summaries short and specific ("Windows install steps" rather than "More"), because the summary is all the reader sees before clicking.
When to Use an HTML Collapsible Section
Use an html collapsible section for content most readers can skip: long logs in a bug report, platform- specific install steps, a spoiler, or the raw output of a command. The README still shows the summary line, so the information is discoverable, and the page stays short. Do not hide the primary install command or license behind one, and avoid collapsing content that search engines should index, since some crawlers weight hidden text lower.
Frequently Asked Questions
How do I make an html collapsible section without JavaScript?
Use the native <details> element with a <summary> child. The browser adds the disclosure triangle and toggles the content on click; no script or CSS is required. Add the open attribute to start expanded. The generator writes this markup for one or many sections.
Why does markdown inside my GitHub collapsible section not render?
GitHub only parses markdown inside an HTML block when the HTML tag is followed by a blank line. Put an empty line after </summary> and another before </details>, which is exactly what GitHub-safe mode does. Without the blank lines the body is shown as raw text.
Can I nest collapsible sections?
Yes. A <details> element can contain another <details>, and GitHub, GitLab and browsers all render the nesting. Tick Show nested example to see the markup; keep the same blank-line rule inside the inner block when the body is markdown.
Which platforms support a markdown collapsible section?
GitHub, GitLab, Bitbucket Cloud, Gitea, Docusaurus, MkDocs and any static site that passes HTML through. Platforms that strip HTML, such as npm's README renderer in some views, Slack and most email clients, show the summary and body as plain text instead.
Can I style the accordion?
In pure HTML mode, turn on inline CSS to get a bordered, padded accordion that works in any page without a stylesheet. GitHub strips style attributes, so leave styling off for READMEs; the default disclosure widget is what GitHub shows regardless.