Markdown Collapsible Section Generator
Build <details> sections that collapse on GitHub, GitLab and Obsidian — nested, open by default, with code inside — and copy the Markdown.
Free, no signup — catches the blank-line mistakes before you paste.
Valid for GitHub: blank lines, tags and nesting are in place.
Markdown · 30 lines
<details>
<summary>Install on macOS</summary>
Requires **Homebrew** 4 or later.
```sh
brew install acme
acme --version
```
<details>
<summary>Apple Silicon notes</summary>
Homebrew lives in `/opt/homebrew` on M-series Macs, so add it to your `PATH`.
</details>
</details>
<details>
<summary>Example config (<code>acme.json</code>)</summary>
```json
{
"port": 8080,
"debug": false
}
```
</details>Preview · as GitHub renders it
Install on macOS
Requires Homebrew 4 or later.
brew install acme
acme --versionApple Silicon notes
Homebrew lives in /opt/homebrew on M-series Macs, so add it to your PATH.
Example config (acme.json)
{
"port": 8080,
"debug": false
}How to make a collapsible section
- Write the summary — The summary is the line readers click. **Bold**, `code` and links are turned into the HTML tags a summary needs.
- Add the body — Write Markdown — lists, tables, images — or switch the body to Code, pick a language, and paste; the fence is added for you.
- Nest or open it — Add nested sections up to three levels deep, and switch on Open by default for anything readers should see first.
- Pick where it goes — GitHub and GitLab get <details> with the blank lines they need; Obsidian gets a foldable callout. Check the preview and the validator, then Copy Markdown.
The collapsible section syntax
A collapsible section is the HTML <details> element. The <summary> inside it is the line that stays visible; everything after it is hidden until the reader clicks. The two empty lines are not decoration — they are what lets the body be Markdown:
<details>
<summary>Click to expand</summary>
Any **Markdown** here: lists, code, tables.
</details>Add open to start it expanded:
<details open>
<summary>Shown expanded</summary>
…
</details>In Obsidian the same idea is a foldable callout, where - starts it closed and + starts it open:
> [!note]- Click to expand
> Any **Markdown** here.Why a collapsible section doesn’t render
The validator under the output checks for each of these, and Check my Markdown runs it on a section you already wrote.
No empty line after </summary>
<details> starts an HTML block, and on GitHub and GitLab an HTML block runs until the first empty line. Without one after </summary> the body is still “HTML”, so its **bold** and - lists show as typed. The generator always writes the empty line.
Markdown inside <summary>
<summary>**Install**</summary> shows the asterisks. Use <b>, <code> and <a href> in the summary — the generator converts your Markdown to those tags.
Indented tags
Four spaces before <details> turn it into an indented code block, so the tags appear as text. Indenting the body “for readability” does the same to the body.
open="false"
Any open attribute opens the section, whatever its value. Leave the attribute out to start collapsed.
</details> right after a list or table
Some renderers swallow the closing tag into the list item or table row above it. An empty line before </details> keeps it separate.
GitHub, GitLab and Obsidian
| Where | What the generator writes | Why |
|---|---|---|
| GitHub | <details> + Markdown body | READMEs, issues, pull requests, comments and wikis. Empty lines after </summary> and before </details>. |
| GitLab | <details> + Markdown body | The same rules as GitHub; HTML tags for formatting in the summary. |
| Obsidian | Foldable callout (> [!note]-) | Obsidian does not render Markdown inside HTML blocks, so a callout with - (closed) or + (open) is the reliable way to fold. |
| Anywhere else | <details> as one HTML block | Choose Format › <details> as HTML for renderers that pass HTML through but skip Markdown inside it: the body becomes HTML with no empty lines. |
Callouts are a different thing
GitHub’s > [!NOTE] alerts highlight a paragraph but cannot fold. For those, use the callout generator; for folding in Obsidian, see the Obsidian callouts guide.
Frequently Asked Questions
How do I make a collapsible section in Markdown?
Markdown has no syntax of its own for it, so you use the HTML <details> and <summary> elements, which GitHub, GitLab and most Markdown renderers allow. Put the visible title in <summary>, leave an empty line, write the body in Markdown, leave another empty line, and close with </details>. This generator writes that for you.
Why is the Markdown inside my <details> block not rendering?
Almost always because there is no empty line after </summary>. Until an empty line ends the HTML block, GitHub and GitLab treat the body as HTML and show its Markdown as typed. Paste your block into Check my Markdown and the validator points to the line.
How do I make a collapsible section open by default?
Add the open attribute: <details open>. Switch on Open by default for a section and the generator adds it. Writing open="false" does not close it — any open attribute opens the section.
Can I nest collapsible sections?
Yes. Put a complete <details> block inside the body of another, with empty lines around it. Use Add nested section to build up to three levels; each nested block is written inside its parent with the blank lines it needs.
Can I put a code block inside a collapsible section?
Yes — the fenced code block just needs the empty line after </summary> like any other Markdown. Switch a section’s body to Code, choose the language, and the generator fences it for you (with a longer fence if your code itself contains backticks).
Does the collapsible section work in GitHub issues and pull requests?
Yes. GitHub renders <details> in READMEs, issues, pull request descriptions, comments, discussions and wikis, which makes it handy for long logs, stack traces and screenshots that would otherwise bury a conversation.
How do I make a collapsible section in Obsidian?
Use a foldable callout: > [!note]- Title starts collapsed and > [!note]+ Title starts open, with the body on the following lines starting with >. Obsidian does not render Markdown inside HTML, so <details> only works there with an HTML body; choose Obsidian and the generator writes the callout.
Can I style the summary with bold, code or a link?
Yes, with HTML: <b>, <code> and <a href> work inside <summary> on GitHub and GitLab. Write Markdown in the Summary field — **bold**, `code`, [link](url) or an :emoji: shortcode — and the generator converts it.