Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to add a collapsible section in markdown.

How to

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

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

Example

Click me

Heading

  1. Foo
  2. Bar
    • Baz
    • Qux

Some Code

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

Rules

  1. Have an empty line after the </summary> tag or markdown/code blocks will not render.
  2. Have an empty line after each </details> tag if you have multiple collapsible sections.
@drecali
Copy link

drecali commented Jun 15, 2022

Great Gist! Thanks so much! I made an even shorter summary from this Gist that integrates the rules as HTML comments (and another minor rule I found). You can delete the HTML comments if you trust yourself to remember the 2 empty lines.

Is there a chrome extension that adds a button to automatically add this? I hate having to remember the syntax every time.

@vjpr You can do this with a bookmarklet.

  • Just create a bookmark with this code as the URL:
    • javascript: (() => { const ele = document.activeElement; ele.setRangeText('<details>\n <summary> Always visible. Can **ONLY** be plaintext </summary>\n<!-- empty line -->\n Collapsible content (Markdown-stylable)\n</details>\n<!-- empty line -->', ele.selectionStart, ele.selectionEnd, 'select'); })();
  • Click in an editable text field
  • Click the bookmarklet and it will insert the minimalist snippet at your current cursor position

@stephnelsonCO thanks for sharing Text Blaze! Looks like a cool tool! More efficient than the bookmarklet but maybe not as satisfying as the DIY approach 🤓

<details>
    <summary>Always visible. Can **ONLY** be plaintext</summary> <!-- Good place for a CTA (Call to Action) -->
 <!-- empty line *️⃣  -->
    Markdown for
    collapsible content
    goes here.
</details>
<!-- empty line *️⃣  -->

And a more minimalist version:

<details>
    <summary> Always visible. Can **ONLY** be plaintext </summary>
<!-- empty line -->
    Collapsible content (Markdown-stylable)
</details>
<!-- empty line -->

@DillonMemo
Copy link

DillonMemo commented Jun 27, 2022

Thanks for tips :)

Tooooggle list 👇
  • code area at bash test
rustup docs --book

@premshetty
Copy link

premshetty commented Jul 1, 2022

  1. Hello
    World
    😄
  2. Hello
    World
    😄
  3. Hello
    World
    😄

code

<ol>
<li> <details><summary>Hello</summary><blockquote>
  <details><summary>World</summary><blockquote>
    :smile:
  </blockquote></details>
</blockquote></details>
</li>
<li> <details><summary>Hello</summary><blockquote>
  <details><summary>World</summary><blockquote>
    :smile:
  </blockquote></details>
</blockquote></details>
</li>
<li> <details><summary>Hello</summary><blockquote>
  <details><summary>World</summary><blockquote>
    :smile:
  </blockquote></details>
</blockquote></details>
</li>
</ol>


@mwiemer-microsoft
Copy link

mwiemer-microsoft commented Jul 1, 2022

Open by default

Hello world! See HTML details tag - W3Schools for more info :)

<details open></summary>Open by default</summary>

Hello world! See [HTML details tag - W3Schools](https://www.w3schools.com/TAGS/tag_details.asp) for more info :)

</details>

@ranggakd
Copy link

ranggakd commented Sep 29, 2022

I haven't found this way of making nested collapsible sections, so I will leave it here just in case, will remove if it's a duplicate. Example:
Hello

World> smile

Code:

<details><summary>Hello</summary><blockquote>
  <details><summary>World</summary><blockquote>
    :smile:
  </blockquote></details>
</blockquote></details>

Originally taken from here.

@11qeq11 Thank you so much that is what I was looking for!

these are quite fire, mate 🔥

@auwsom
Copy link

auwsom commented Sep 29, 2022

Testing if nested open works..and it does. Closed is by default.

<details open><summary>Hello</summary><blockquote>
  <details><summary>World - click me to open</summary><blockquote>
    :smile:
  </blockquote></details>
  <details open><summary>World</summary><blockquote>
    :smile:
  </blockquote></details>
</blockquote></details>
Hello
World - click me to open
😄
World
😄

@auwsom
Copy link

auwsom commented Sep 29, 2022

You can also use markdown inside the HTML.
https://gist.github.com/scmx/eca72d44afee0113ceb0349dd54a84a2
I'm trying to find a tool that converts nested lists in markdown to HTML details and blockquotes.

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