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

@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