Will render on GitHub and GitLab?

Yes. Both GitHub and GitLab render the native HTML5 / element as a click-to-expand block.

Can I put Markdown inside the block?

Yes — but you must leave a blank line between the tag and the Markdown content for it to be parsed correctly.

Does the block stay open by default?

Add the open attribute ( ) to expand the section by default; without it, the block starts collapsed.

Is the content stored?

No. The HTML is generated locally in your browser.

details · summary · GitHub-friendly

Build collapsible sections in Markdown

Use the HTML details/summary tags to hide long content behind a clickable disclosure — perfect for READMEs, issue templates, and bug reports.

Collapsible Generator

Markdown

104 B

8 lines

Summary

15 B

clickable label

Content lines

inside block

Default state

closed

on load

input · fields

Summary (clickable label)

Content (Markdown — supports code, lists, **bold**)

output · markdown

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

Hidden content here.

Supports **Markdown**.

</details>

Quick Start

How to build collapsible Markdown

Wrap any block with details and summary tags. Works in GitHub, GitLab, Bitbucket, and most renderers.

01
Write a summary
The clickable label shown when collapsed.
Parsing runs through marked with GFM extensions enabled — tables, task lists, strikethrough, and fenced code blocks all match GitHub’s rendering.
labelGFMmarkedCommonMarklive
input · markdownsummary · GFM
```
<summary>Click to expand</summary>
```
loaded · GFMGFM · ready
02
Add content
Any Markdown — lists, fences, tables — goes inside the details block.
Soft-break behaviour is configurable: by default a single newline becomes a space (CommonMark), toggle on for chat-style <br> insertion.
contentsoft-breaksoptionsconfiglive
body · optionsrich · live
```
Hidden content
works too.
```
options applied · livelive
03
Default open?
Toggle the open attribute so the block expands on first render.
The preview is scoped under a .mde class so its CSS doesn’t bleed into the rest of the page. Output HTML is whitespace-controlled for clean diffs.
statepreviewscoped CSSrenderstable
open? · renderedno · ready
```
<details open>
```
rendered · liverendered
04
Copy & paste
Drop the snippet straight into your README or issue.
Export covers both raw Markdown and rendered HTML; downloads stream as text/markdown or text/html via Blob + object URL.
exportclipboard.md.htmlblob
✓ · exportedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Author Markdown that renders everywhere

GFM is the safe default

GitHub-Flavored Markdown is the de-facto baseline (tables, task lists, strikethrough). CommonMark is stricter but ubiquitous as a fallback.

Soft-break behaviour varies

A single newline is a space in CommonMark, a <br> in GFM. Toggle soft breaks when source matters.

Escape inside code fences

Backticks inside fenced blocks need a longer fence — three becomes four. Use ~~~ if your content has many backticks.

Anchors are slugified

GitHub lowercases, strips punctuation, and joins with hyphens. Duplicate headings get -1, -2 suffixes.

Tables need a header row

The dash row sets alignment (:---, :-:, ---:). Use Table Aligner for diff-friendly columns.

Front matter is YAML

Triple-dash blocks at the top of files are parsed by static-site generators. Use the Front-Matter Validator to catch syntax errors.

Use Cases

When to use collapsibles

READMEs, issue templates, long docs.

Long READMEs

Hide noisy install logs or troubleshooting blocks behind a click. Render path uses marked with GFM extensions enabled (tables, task lists, strikethrough, autolinks), so what you preview matches what GitHub publishes bit-for-bit. Soft-break behaviour is configurable for chat-style vs prose Markdown.

GFM-compliant

Bug reports

Stash stack traces and env dumps in issue templates. Pairs cleanly with the Markdown Cheatsheet for syntax you can't quite remember — callout blocks, footnotes, definition lists. Output stays diff-friendly so style-only changes don't drown out real edits in PRs.

GitHub-perfect

FAQ sections

One block per question, expand on demand. Cross-platform safe: anchors, code fences, and tables behave identically on GitHub, GitLab, Bitbucket, and Gitea. Heading-anchor slugs follow GitHub's lowercase-and-hyphenate rules so deep links survive a docs migration.

diff-friendly

Change log details

Surface high-level bullets, hide low-level commits. No server roundtrip — perfect for proprietary content you can't paste into a public tool. The full marked + GFM bundle ships with the page, so it works offline once loaded.

render-stable

Spoilers

Hide spoilers or solutions in tutorials. Front matter (YAML / TOML / JSON) passes through unchanged so static-site pipelines (Jekyll, Hugo, Astro, Eleventy) read it correctly. Pair with the Front-Matter Validator to catch syntax errors before deploy.

cross-platform

Workflow templates

Keep pull request templates concise; details on click. Output is reproducible: identical input always produces identical Markdown, so doc-generation scripts can rely on it for snapshot tests and embedded into release workflows.

SEO-friendly

FAQ

Frequently asked questions

Where does this render?

Anywhere that allows raw HTML in Markdown — GitHub, GitLab, Bitbucket, MkDocs, Docusaurus.

Can I nest collapsibles?

Yes. Put another details block inside the content textarea — indentation isn't required.

Why isn't Markdown rendering inside?

Leave a blank line between the summary tag and the body so the renderer re-enters Markdown mode.

Can it open by default?

Yes — toggle Open by default and the open attribute is added to the tag.

Is anything sent to a server?

No. The snippet is built locally in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!