How to use collapsed sections on GitHub

What this covers

GitHub lets you tuck long notes, code, or images behind a collapsed section in issues, pull requests, discussions, and other Markdown surfaces. Readers see a short label and a disclosure control; a click reveals the rest. This keeps noisy detail out of the default scan path without deleting it.

Source: Organizing information with collapsed sections.

flowchart LR
    Details["<details> Container"] --> Summary["<summary> Clickable Label"]
    Summary --> Body["Collapsed Markdown Body Content"]
    Body --> Close["</details> Closing Tag"]

Create a collapsed section

1. In the comment or Markdown body, open a <details> block.
2. Inside it, add a <summary>…</summary> line with the label readers should see while the section is closed.
3. Put any Markdown you want hidden for now (headings, text, images, or fenced code) between the summary and the closing </details> tag.
4. Save or comment as usual. GitHub renders the block collapsed until someone expands it.

Example:

<details><summary>Tips for collapsed sections</summary>### You can add a headerYou can add text within a collapsed section.You can add an image or a code block, too.```rubyputs "Hello World"

On GitHub, the summary appears beside the right-triangle disclosure control. After a reader expands it, nested Markdown renders normally.

Open by default

To show the section expanded on first view, add the open attribute:

<details>

Use that for important caveats you still want collapsible later.

Tips that match the docs

• Anything valid inside the <details> block stays collapsed until expanded.
• The summary label is what people scan : make it specific (“Stack trace”, “Full config”) instead of “Details”.
• Collapsed sections are Markdown/HTML in the editor, not a separate Settings toggle.

Further reading

• GitHub Flavored Markdown Spec
• Basic writing and formatting syntax