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

Rykarix commented Oct 29, 2021

I've seen people ask about changing summary font. This can be done on the same line as the arrow with styles just not in githubs markdown because they don't allow certain tags:

View code

<details>
<summary style="font-size:14px">View code</summary>
<p>

\```md

\```

</p></details>

.

It might not be ideal but you can make it slightly more pronounced by segmenting it with a --- like so


View code

---

<details>
<summary style="font-size:14px">View code</summary>
<p>

\```md

\```

</p></details>

---


Not ideal, I know, but it can make it a bit more obvious. Otherwise you gotta just put up with the headers not being inline with the arrow. If anyone else knows of a work around feel free to post it.

@auwsom
Copy link

auwsom commented Oct 30, 2021

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!

@rustycl0ck
Copy link

rustycl0ck commented Nov 25, 2021

Is it possible to hyperlink to a heading inside the details HTML block?

For some amazing info, you can checkout the [below](#amazing-info) section.

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

## Amazing Info
It would be great if a hyperlink could directly show this title.

</details>

For some amazing info, you can checkout the below section.

Click to expand

Amazing Info

It would be great if a hyperlink could directly show this title.

@ayoreis
Copy link

ayoreis commented Nov 25, 2021

@rustycl0ck You’d have to use a HTML anchor.

@destroylord
Copy link

destroylord commented Dec 8, 2021

Click to expand!

Amazing info

Klik Dong!

XIXI

@Hiren879
Copy link

Hiren879 commented Dec 16, 2021

Can I add horizontal tabs in git readMe file?
I tried to find such examples but I was not able to find any.

@stephen-zhao
Copy link

stephen-zhao commented Dec 21, 2021

There seems to be some issues with using the nested toggles as mentioned in https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab#gistcomment-3837764

Top Level Toggle

Great, Top Layer summary text working fine.

  • Mid Toggle

    Great, Middle Layer summary text working fine.

    • Inner Toggle 1

      Great, Inner Layer summary text working fine.

    • Inner Toggle 2 - should not show up when Mid Toggle is collapsed :(

      Great, Inner Layer summary text working fine.

  <details>
  <summary><b><u>Top Level Toggle</u></b></summary>

  <p>
          Great, Top Layer summary text working fine.
  </p>

  *   <details>
      <summary><b>Mid Toggle</b></summary>

      <p>
          Great, Middle Layer summary text working fine.
      </p>

      * <details>
        <summary><b><i>Inner Toggle 1</i></b></summary>

        <p>
          Great, Inner Layer summary text working fine.
        </p>

      </details>

      * <details>
        <summary><b><i>Inner Toggle 2 - should not show up when Mid Toggle is collapsed :(</i></b></summary>

        <p>
          Great, Inner Layer summary text working fine.
        </p>

      </details>
  </details>
  </details>

@BenGlicksberg
Copy link

BenGlicksberg commented Jan 3, 2022

Does anyone know how to number the collapsable lists? i.e.,

  1. > collapse
  2. > collapse

@zw963
Copy link

zw963 commented Jan 15, 2022

I want to test this feature, anyway, i know how long, but never use it.

Click me!

Heading

  1. A numbered
  2. list
    • With some
    • Sub bullets

@JeffMII
Copy link

JeffMII commented Feb 1, 2022

I thought this would be a good scenario to include in this thread. Here, I'm using Task Lists in a Collapsible Section. After a few attempts I discovered in this thread that you have to add an empty line above and below any md markup that are inside tags for them to work. Also, I think the line break tag makes it look better.

## Tasks
<details>
  </br>

  - [X] Item1
  - [ ] Item2
  - [ ] Item3

</details>

Tasks


  • Item1
  • Item2
  • Item3

@zubriktomas
Copy link

zubriktomas commented Feb 16, 2022

Is it possible to style clickable text in <summary> Click Me </summary> section?

EDIT: I have just noticed. <b> Click Me </b>

@zubriktomas
Copy link

zubriktomas commented Feb 16, 2022

If anyone wonders how to make section <details> opened by default use <details open> Content </details>

@Pyrolistical
Copy link

Pyrolistical commented Feb 23, 2022

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>

@jonrbates
Copy link

jonrbates commented Feb 27, 2022

Any hints for getting fenced code to work?

click for python code ```python d = {1: 'foo', 2: 'bar'} ```

Edit:

click for python code
d = {1: 'foo', 2: 'bar'}

@Pyrolistical
Copy link

Pyrolistical commented Feb 27, 2022

@jonrbates you need a extra line after <summary> and before the code block

@YlesAlex
Copy link

YlesAlex commented Mar 1, 2022

Click to expand!

Heading

ky ky

@harshalkaigaonkar
Copy link

harshalkaigaonkar commented Mar 7, 2022

It's only working for the HTML-supported Markdown Processor like remarkable.
Not able to work with Confluence.
Any alternate way?

@imjehoon
Copy link

imjehoon commented Apr 19, 2022

Click to expand!

Heading

hi

@Treevuhh
Copy link

Treevuhh commented Apr 22, 2022

How did you get this to format as so in this comment then? @Pyrolistical

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

@Pyrolistical
Copy link

Pyrolistical commented Apr 22, 2022

@Treevuhh looks like they fixed it!

@gmtommasini
Copy link

gmtommasini commented Apr 28, 2022

@Pyrolistical

For me is in the next line too.
Did you do something to fix it?

Thanks!

@Treevuhh
Copy link

Treevuhh commented Apr 28, 2022

@Pyrolistical

For me is in the next line too. Did you do something to fix it?

Thanks!

Ya I wanna know too, @Pyrolistical
@gmtommasini It appeared to work for me while in my repo and editing but as a public facing page the summary continues to go to the next line and the drop down triangle is left alone on a line above. You can see how I tried to use it here for some FAQ questions and was close to success faq.md

@vjpr
Copy link

vjpr commented May 17, 2022

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

@stephnelsonCO
Copy link

stephnelsonCO commented May 20, 2022

I love Text Blaze for this @vjpr !

@liszt831020
Copy link

liszt831020 commented May 23, 2022

Thanks for sharing this!

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

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