Collapsible Sections in Markdown
Markdown has no syntax for folding, but the HTML <details> tag works on GitHub and in most editors. This guide shows the pattern, the blank lines it needs, and the folding features some apps add.
Quick answer
How do you make a collapsible section in Markdown?
Wrap the content in <details> and put the always-visible title in <summary>. Leave a blank line after </summary> so the Markdown inside is rendered. Readers click the title to open the section; add open to the tag to show it expanded.
<details>
<summary>Click to expand</summary>
Hidden content with **Markdown** in it.
</details>Result
Click to expand
Hidden content with Markdown in it.
Collapsible section examples
Click the titles in the results to open and close the sections.
Open by default
The open attribute shows the section expanded until the reader closes it.
<details open>
<summary>Release notes</summary>
- Faster start-up
- A new export menu
</details>Result
Release notes
- Faster start-up
- A new export menu
Code inside a section
Long logs and code fit well in a closed section. Keep blank lines around the code block.
<details>
<summary>Show the build log</summary>
```text
[12:01] Build started
[12:03] Build finished
```
</details>Result
Show the build log
[12:01] Build started
[12:03] Build finished
Nested sections
A section can hold others, each with its own summary.
<details>
<summary>Chapter 1</summary>
<details>
<summary>Section 1.1</summary>
Text of section 1.1.
</details>
</details>Result
Chapter 1
Section 1.1
Text of section 1.1.
Formatting in the summary
The summary line is HTML, so use tags such as <b> and <code> there; Markdown is not read in it.
<details>
<summary><b>Answer</b> (click to show)</summary>
The answer is **42**.
</details>Result
Answer (click to show)
The answer is 42.
A missing blank line
Without a blank line after </summary>, the content counts as part of the HTML and its Markdown is shown as typed.
<details>
<summary>Open me</summary>
**This stays as typed**
</details>Result
Open me
**This stays as typed**Obsidian: foldable callouts
In Obsidian, a callout with - after its type starts folded and opens with a click.
> [!faq]- How do I reset my password?
> Open Settings and choose Reset password.Obsidian only. Other Markdown apps display this differently, so there is no preview.
Collapsible sections in popular apps
<details> needs an app that keeps HTML. Some apps have their own folding instead.
| App | Support | Notes |
|---|---|---|
| GitHub / GitLab | Supported | <details> works in files, issues and comments. |
| VS Code / Typora | Supported | <details> opens and closes in the preview. |
| Obsidian | Differs | <details> works, but Markdown inside it is not rendered; foldable callouts such as > [!note]- are the native way. |
| Notion | Differs | No <details>; typing > and a space makes a toggle block. |
| Discord / Slack | Not supported | No collapsible sections; Discord hides text as a spoiler with ||text||. |
Questions and answers
How do I make a collapsible section on GitHub?
<details> with a <summary> line, and leave a blank line after </summary> so the Markdown inside renders. It works in READMEs, issues, pull requests and comments.Why doesn't Markdown render inside my <details>?
<details>?</summary> and before </details>. Without them, the content counts as part of the HTML and is shown as typed.How do I make a section open by default?
open to the tag: <details open>.Can I put code blocks or lists inside?
How do I hide a spoiler in Discord?
||spoiler||. Readers click it to reveal the text.Is <details> accessible?
<details> accessible?