Markdown Collapsible Section Generator

Generate correctly-formatted <details><summary> collapsible sections for Markdown, with the required blank line so nested Markdown actually renders on GitHub. Free, no signup.

Preview (click the summary to expand/collapse)

Markdown Collapsible Section Generator

Markdown has no native syntax for collapsible or "spoiler" content. The common workaround — supported by GitHub, GitLab, and several other renderers — is to wrap content in the standard HTML <details>/<summary> tags. It works well, but the exact formatting is fiddly to get right by hand, especially if you want the Markdown inside the block (lists, bold text, code blocks, links) to actually render instead of showing up as raw text. This tool generates it correctly every time.

The syntax, and the blank-line gotcha

A correctly-formatted collapsible section looks like this:

<details>
<summary>Click to expand</summary>

Your **Markdown** content goes here.

- It can include lists
- And other Markdown syntax
</details>

The part almost everyone gets wrong: on GitHub-flavored Markdown, the content inside <details> is only parsed as Markdown if there is a blank line immediately after the <summary> tag. Skip that blank line and GFM treats the whole block as raw HTML, so **bold** shows up literally as asterisks instead of being bolded. This tool always inserts that blank line automatically, along with a blank line before the closing </details> tag for good measure.

Renderer support varies — be aware

<details>/<summary> are plain HTML tags, and most Markdown renderers pass raw HTML through untouched — that's how this trick works at all. GitHub and GitLab both render Markdown inside the block correctly when the blank-line rule above is followed. Plain CommonMark and many static-site generators (Jekyll/kramdown, Hugo, plain Pandoc) will render the <details> element itself, since it's just HTML, but depending on configuration may not re-parse the Markdown inside it as Markdown — some require an explicit "parse HTML block content" or "markdown=1" style setting, and others will only render inline HTML content as-is. If your target platform isn't GitHub or GitLab, test the output before relying on it, and check whether your renderer needs a markdown="1" attribute on the <details> tag to opt back into Markdown parsing.

Common use cases

  • FAQs — keep a long page of questions scannable by collapsing answers by default
  • Long code samples or logs — show a summary line and let readers expand full output only if they need it
  • Spoilers — hide plot details, solutions, or answers behind a click
  • Changelogs / release notes — collapse older or less-relevant entries so the newest ones stand out
  • Issue and PR templates — collapse verbose environment info or stack traces by default

For a deeper walkthrough of collapsible sections across different platforms, see our companion guide: Markdown Collapsible Sections: The Complete Guide.

Related tools