Skip to content

Instantly share code, notes, and snippets.

@lossyrob

lossyrob/markdown-details-collapsible.md

Forked from pierrejoubert73/markdown-details-collapsible.md
Created June 17, 2021 15:00
Show Gist options
  • Save lossyrob/a44de2c0aecc57fcde78a20bae938702 to your computer and use it in GitHub Desktop.
Save lossyrob/a44de2c0aecc57fcde78a20bae938702 to your computer and use it in GitHub Desktop.
Download ZIP
How to add a collapsible section in markdown.
Raw
markdown-details-collapsible.md

A collapsible section containing markdown

Click to expand!

Heading

  1. A numbered
  2. list
    • With some
    • Sub bullets

A collapsible section containing code

Click to expand! 
  function whatIsLove() {
    console.log('Baby Don't hurt me. Don't hurt me');
    return 'No more';
  }

How to structure

# A collapsible section with markdown
<details>
  <summary>Click to expand!</summary>
  
  ## Heading
  1. A numbered
  2. list
     * With some
     * Sub bullets
</details>

NB: Make sure you have an empty line after the closing </summary> tag, otherwise the markdown/code blocks won't show correctly.

NB: Make sure you have an empty line after the closing </details> tag if you have multiple collapsible sections.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment