Skip to content

Instantly share code, notes, and snippets.

@barkode

barkode/markdown-details-collapsible.md

Forked from pierrejoubert73/markdown-details-collapsible.md
Created July 29, 2024 19:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save barkode/f1572fef2661e91b661ca08a0ef8c2b3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save barkode/f1572fef2661e91b661ca08a0ef8c2b3 to your computer and use it in GitHub Desktop.
Download ZIP
How to add a collapsible section in markdown.
Raw
markdown-details-collapsible.md

How to add a collapsible section in markdown.

Example

Click me

Heading

  1. Foo
  2. Bar
    • Baz
    • Qux

Some Code

function logSomething(something) {
  console.log('Something', something);
}

Code

<details>
  <summary>Click me</summary>
  
  ### Heading
  1. Foo
  2. Bar
     * Baz
     * Qux

  ### Some Code
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```
</details>

Tips & Tricks (WIP)

Expand by default

The collapsible section can expanded by default. Simply add 'open' in your details tag:

<details open>
...
</details>

Rules (If you don't do this, your code may not work)

  1. Always have an empty line after the </summary> tag
  2. Always have an empty line after each </details> tag
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment