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