Keep Markdown working inside
Leave an empty line after <summary> and before </details>. Without them,
the Markdown inside shows as plain text.
You write
<details>
<summary>With empty lines</summary>
**This is bold**, and this is a [link](https://example.com).
</details>You see
With empty lines
This is bold, and this is a link.
Start it open
Add open to the details tag.
You write
<details open>
<summary>Already open</summary>
Click the line above to close it.
</details>You see
Already open
Click the line above to close it.
Hide a long code block
A good use for it: a long log or config file that only some readers need.
You write
<details>
<summary>Full error log</summary>
```text
Error: connection refused
at connect (net.js:120)
at retry (client.js:44)
```
</details>You see
Full error log
Error: connection refused
at connect (net.js:120)
at retry (client.js:44)
Make the summary bold or a heading
Put formatting inside the summary tag with HTML. Markdown symbols do not
work inside it in every app.
You write
<details>
<summary><strong>Answer</strong></summary>
Forty two.
</details>You see
Answer
Forty two.
Common problems
- Everything inside shows as plain text. Add an empty line after
<summary>and before</details>. - The tags show on the page. The app does not allow HTML.
- The section is open when printed. That depends on the app. MarkdownPaper prints what is open on screen.
Questions
How do I make a dropdown in Markdown?
Use <details> with a <summary> line, as in the first example. Markdown
itself has no dropdown.
Do collapsible sections work on GitHub?
Yes, in README files, issues, comments and pull requests.
Can I nest one collapsible section inside another?
Yes. Put a whole <details> block inside another, with empty lines around
it.
Next
- How to add comments in Markdown, for text that should never show.
- Read a README with collapsible parts as a page.