home / guides

Make a Collapsible in Markdown

Simple Usage

A collapsible Details Section Containing markdown

Click to expand!

Heading

1. both numbered
2. and lettered ordered lists
3. and unordered lists
   • with bullets
   • or sub-bullets

Structure in Markdown

### A collapsible Details Section Containing markdown

<details>
  <summary>Click to expand!</summary>
  
  ## Heading
  1. both numbered
  2. and lettered ordered lists
  3. and unordered lists
     * with bullets
     * or sub-bullets
</details>

Structure in HTML / Githubpages

### A collapsible Details Section Containing markdown

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

  <h2>Heading</h2>

  <ol>
    <li>both numbered</li>
    <li>and lettered ordered lists</li>
    <li>and unordered lists
      <ul>
        <li>with bullets</li>
        <li>or sub-bullets</li>
      </ul>
    </li>
  </ol>

</details>

NOTE:

Very important rules for github markdown

otherwise the markdown/code blocks won’t show correctly.

1. MUST HAVE an empty line after the closing </summary> tag.
2. MUST HAVE an empty line after the closing </details> tag if you have multiple collapsible sections.
3. FOR Github Pages, all content inside of HTML tags MUST BE in HTML, not markdown.

Advanced Usage

MDN HTML Documentation on details tag.

⬅️ Back to Guides