Skip to content

Instantly share code, notes, and snippets.

@pierrejoubert73

pierrejoubert73/markdown-details-collapsible.md

Last active Mar 17, 2022
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
How to add a collapsible section in markdown.
Raw
markdown-details-collapsible.md

A collapsible section containing markdown

Click to expand!

Heading

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

A collapsible section containing code

Click to expand! 
  function logSometing(something) {
    console.log(`Logging: ${something}`);
  }

How to structure

# A collapsible section with markdown
<details>
  <summary>Click to expand!</summary>
  
  ## Heading
  1. A numbered
  2. list
     * With some
     * Sub bullets
</details>

Two important rules:

  1. Make sure you have an empty line after the closing </summary> tag, otherwise the markdown/code blocks won't show correctly.
  2. Make sure you have an empty line after the closing </details> tag if you have multiple collapsible sections.
@jexp
Copy link

jexp commented Jul 23, 2021

Seems to work with asciidoc too

.Toggle Me
[%collapsible]
====
This content is revealed when the "Toggle Me" label is clicked.
====

asciidoctor/asciidoctor#1699 (comment)

@pratik-vaidya
Copy link

pratik-vaidya commented Jul 31, 2021 •
edited

I am able to create the tabbed / Multilevel toggles for markdown in the Jupyter notebook. The markdown syntax used is given below.
Thought this would be useful to someone, in case wants to use it.

Top Level Toggle

Great, Top Layer summary text working fine.

  • Mid Toggle

    Great, Middle Layer summary text working fine.

    • Inner Toggle

      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</i></b></summary>

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


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

@fxia22
Copy link

fxia22 commented Aug 13, 2021

A collapsible section with markdown

Click to expand!

Heading

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

@ndiing
Copy link

ndiing commented Aug 17, 2021

Click to expand!

Heading

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

@pierrejoubert73
Copy link
Author

pierrejoubert73 commented Aug 26, 2021

@pratik-vaidya Nice!

@rochacbruno
Copy link

rochacbruno commented Aug 31, 2021

Click here for a revelation

...
FORA BOLSONARO!
...

@HorebParraud
Copy link

HorebParraud commented Sep 15, 2021

header

why is the arrow not next to header

  <summary> 
   <h2>header</h2>
   </summary>

 why is the arrow not next to header?
  
</details>```

hi, I have the same problem and I could not solve it with the proposal below

@lhzw
Copy link

lhzw commented Sep 20, 2021

Great, the empty line following the saved me, thank you.

@ayoreis
Copy link

ayoreis commented Sep 20, 2021

Does anybody know how do I remove the line break betwen the text and the link part in the title?

<details>
    <summary>Text

    [Link](//example.com)

    </summary>

Content...

</details>
Text

Link

❤️ Thanks for this amazing tip!

@rochacbruno
Copy link

rochacbruno commented Sep 20, 2021

try @ayoreis

<details>
    <summary>Text <a href="http://....">Link</a></summary>

Content...

</details>
Text Link

Content...

@ayoreis
Copy link

ayoreis commented Sep 20, 2021

👍 @rochacbruno That works! Thought would be cool if I could use Markdown some way.

@jbsilva
Copy link

jbsilva commented Sep 21, 2021

I am able to create the tabbed / Multilevel toggles for markdown in the Jupyter notebook. The markdown syntax used is given below.
Thought this would be useful to someone, in case wants to use it.
Top Level Toggle

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

Thanks @pratik-vaidya. This worked great!

If you remove all </details> it will still work even when exporting to HTML.

@11qeq11
Copy link

11qeq11 commented Sep 21, 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
😄

Code:

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

Originally taken from here.

@Rykarix
Copy link

Rykarix commented Oct 29, 2021 •
edited

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 •
edited

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 •
edited

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

@jonrbates
Copy link

jonrbates commented Feb 27, 2022 •
edited

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 •
edited

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?

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