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.
@minjk-bl
Copy link

minjk-bl commented May 30, 2022

Thanks for tips! I want to test it here.

NOTE : This is optional codes
To install package follow its steps
pip install jupyter_contrib_nbextensions

or

conda install -c conda-forge jupyter_contrib_nbextensions
Single Code area test - To install package follow its steps
```bash
pip install jupyter_contrib_nbextensions
```

@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.

@Realank
Copy link

Realank commented Oct 14, 2022


  • Item1
  • Item2
  • Item3

@samuelgfeller
Copy link

samuelgfeller commented Oct 26, 2022

It does seem GitHub fixed it but PHPStorm markdown viewer still displays it wrongly:

image

Seems like its broken if you try to put an <h3> inside the <summary>

why is this h3 on the next line?

i think it has something to do with the fact h3 is a block element
edit: looks like it has been fixed

<details>
<summary><h3>why is this h3 on the next line?</h3></summary>
i think it has something to do with the fact h3 is a block element
</details>

@auwsom
Copy link

auwsom commented Oct 27, 2022

@samuelgfeller there are a ton of markdown standards floating around. That one must be different than GitHub's.

I noticed today when using the collapse on a bug report in GitHug that it cancels any of GH's formatting, say for "code", which makes sense. But how to combine them? I just tried using the html tag <code>, and it kind of worked but still the text loses the line separation. Is this a part to of the <details>tag, that it removes lines breaks and smushes the text together into one string?

<details><summary>report - click this</summary>
<code>
cpu_adam ............... [NO] ....... [OKAY]
cpu_adagrad ............ [NO] ....... [OKAY]
fused_adam ............. [NO] ....... [OKAY]
</code>
</details>
report - click this cpu_adam ............... [NO] ....... [OKAY] cpu_adagrad ............ [NO] ....... [OKAY] fused_adam ............. [NO] ....... [OKAY]

Update: Oh, weird. It works on Gist, but not on GitHub.

@samuelgfeller
Copy link

samuelgfeller commented Oct 28, 2022

@auwsom why not use ```

<details><summary>report - click this</summary>

``` // opening 
cpu_adam ............... [NO] ....... [OKAY]
cpu_adagrad ............ [NO] ....... [OKAY]
fused_adam ............. [NO] ....... [OKAY]
``` // closing
</details>
report - click this
cpu_adam ............... [NO] ....... [OKAY]
cpu_adagrad ............ [NO] ....... [OKAY]
fused_adam ............. [NO] ....... [OKAY]

@SilentFlute
Copy link

SilentFlute commented Oct 28, 2022

@Treevuhh looks like they fixed it!

fantastic, it worked! thx ;)

@ranggakd
Copy link

ranggakd commented Oct 29, 2022

The coolest thing is you could make it on beacons.ai markdown like me 🥰😁
Screen_Recording_20221030_024005_Chrome_1

@jisungbin
Copy link

jisungbin commented Nov 29, 2022

Thanks!

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