Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to add a collapsible section in markdown.

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 whatIsLove() {
    console.log('Baby Don't hurt me. Don't hurt me');
    return 'No more';
  }

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>

NB: Make sure you have an empty line after the closing </summary> tag, otherwise the markdown/code blocks won't show correctly.

NB: Make sure you have an empty line after the closing </details> tag if you have multiple collapsible sections.

@aronisstav

This comment has been minimized.

Copy link

@aronisstav aronisstav commented Sep 7, 2018

Cool! Any ideas how one could add code formating ? This doesn't work:

Show `code` Still not code: ``` this is not code it should be code why can't it be code ```
@dvdstelt

This comment has been minimized.

Copy link

@dvdstelt dvdstelt commented Sep 12, 2018

Sure you can. Just remember to add a full empty line before the ```
Otherwise the codeblock doesn't properly start.

I could use some help...

public class Order
{
    public int OrderId { get; set; }
    public int CustomerId { get; set; }

    public List<int> Products { get; set; }
}


I'll put the entire codeblock here, but because there are ''' inside it, I added one backslash (\) to the end, or otherwise formatting would be messed up. So remember to remove the backslash when copying this.

<details>
<summary>I could use some help...</summary>
<p>

```c#
public class Order
{
    public int OrderId { get; set; }
    public int CustomerId { get; set; }

    public List<int> Products { get; set; }
}
\```

</p>
</details>  
@pierrejoubert73

This comment has been minimized.

Copy link
Owner Author

@pierrejoubert73 pierrejoubert73 commented Oct 11, 2018

@dvdstelt Thanks for the tip! I've updated the gist to be a little more thorough.

@jsaintvanne

This comment has been minimized.

Copy link

@jsaintvanne jsaintvanne commented Oct 16, 2018

Is there a limit of hidden section ?
Say it cause I would like to hide something collapsible and it isn't take part of my details section, just have an empty thing...
I work with Atom, and its preview. Maybe the problem comes from here and that should be repair on Github when I will push it ?

Edit : I just verify and it looks that's Atom that doesn't support all things about collapsible section. That works well when I push it on Github !

@pierrejoubert73

This comment has been minimized.

Copy link
Owner Author

@pierrejoubert73 pierrejoubert73 commented Oct 16, 2018

@jsaintvanne Looks like there are a few markdown related issues listed on the Atom issues page already. Maybe consider adding this one?

@filiagees

This comment has been minimized.

Copy link

@filiagees filiagees commented Nov 6, 2018

Thanks! 👍
Quite useful

@greymonroe

This comment has been minimized.

Copy link

@greymonroe greymonroe commented Dec 1, 2018

@pascalandy

This comment has been minimized.

Copy link

@pascalandy pascalandy commented Dec 4, 2018

Hey folks, thanks for sharing!

Question

I'd would like to use my own button. The issue is that the default arrow is in the way. Any way to hide it ?

Step to reproduce

screen recording 2018-12-04 at 02 58 pm

Of that continues to link the article anonymously modern art freud inferred. Eventually primitive brothel scene with a distinction. The Enlightenment criticized from the history.

<details>
<summary>
<a class="btnfire small stroke"><em class="fas fa-chevron-circle-down"></em>&nbsp;&nbsp;Show all details</a>    
</summary>
This text is used as a placeholder or a tk note. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Cheers!
[Pascal](https://twitter.com/askpascalandy/)

</details>

**From understanding** of the day worked either through 1912 analytic. And criticised Vasari's cult of a broader term that the date. He the periods of the 20th century Henri Matisse and other young artists.

Thank you!

@Juice10

This comment has been minimized.

Copy link

@Juice10 Juice10 commented Jan 24, 2019

Already open...

<details open>
<summary>Already open...</summary>

<p>...</p>
</details>  

@MarissaHeloise

This comment has been minimized.

Copy link

@MarissaHeloise MarissaHeloise commented Feb 10, 2019

collaps
1. a
2. b
3. c
4. d
   -  check
print("Hello")
  • check

Thanks!

@pierrejoubert73

This comment has been minimized.

Copy link
Owner Author

@pierrejoubert73 pierrejoubert73 commented Apr 11, 2019

@Juice10 That's cool!

@pierrejoubert73

This comment has been minimized.

Copy link
Owner Author

@pierrejoubert73 pierrejoubert73 commented Apr 11, 2019

@pascalandy Sorry for the very late reply. Have you figured it out?

I have no idea how to hide those carets, but I saw this article that touches on a different way of hiding/showing blocks of content, although, I've not looked into it much. It looks a little advanced.

@s3528261

This comment has been minimized.

Copy link

@s3528261 s3528261 commented May 28, 2019

Click to expand!

Heading

dsadsadsadsadsadsadsadsa

@KepanoEgg

This comment has been minimized.

Copy link

@KepanoEgg KepanoEgg commented Jun 24, 2019

Is it possible to indent nested collapsible lists?

Section A
I want this line indented when Section A opens
  • This isn't visible until you open the inner section, but I want it indented twice (once under the inner section)
Section B
@filipradenovic

This comment has been minimized.

Copy link

@filipradenovic filipradenovic commented Jul 2, 2019

@KepanoEgg, have you figured out how to indent nested collapsible elements?

@arthursoas

This comment has been minimized.

Copy link

@arthursoas arthursoas commented Aug 2, 2019

Thank you a lot

@vipinkumarr89

This comment has been minimized.

Copy link

@vipinkumarr89 vipinkumarr89 commented Aug 10, 2019

"Click to expand" * testing hide/show feature
@mwouts

This comment has been minimized.

Copy link

@mwouts mwouts commented Sep 22, 2019

That is great! Thanks for documenting this.

I was surprised to see that this does work in VS Code. And even in Jupyter, within a Markdown cell! Does anyone knows if we can use this to collapse mutliple cells of a Jupyter notebook?

vscode
jupyter

@ryanlovett

This comment has been minimized.

Copy link

@ryanlovett ryanlovett commented Nov 15, 2019

Thanks for documenting this!

Is there any way to have the clickable text appear in-line or must it always start on a new line?

@digital-ember

This comment has been minimized.

Copy link

@digital-ember digital-ember commented Nov 22, 2019

This is very helpful, thank you all for sharing.
One question: is it possible to have different text for whether or not the section is collapsed or not? E.g. show "Hide example" when the section is open and "Show example" when the section is closed?

@GF-Huang

This comment has been minimized.

Copy link

@GF-Huang GF-Huang commented Nov 23, 2019

Sure you can. Just remember to add a full empty line before the ```
Otherwise the codeblock doesn't properly start.

I could use some help...

I'll put the entire codeblock here, but because there are ''' inside it, I added one backslash () to the end, or otherwise formatting would be messed up. So remember to remove the backslash when copying this.

<details>
<summary>I could use some help...</summary>
<p>

```c#
public class Order
{
    public int OrderId { get; set; }
    public int CustomerId { get; set; }

    public List<int> Products { get; set; }
}
\```

</p>
</details>  

So, how to use code block in summary ?

The `Summary`
Contents.
@leoschet

This comment has been minimized.

Copy link

@leoschet leoschet commented Dec 19, 2019

@GreatFireWall I only managed to do that by adding a full empty line right after the <summary>. the line break appears in the summary tho

The Summary

more content

@robswhitmore

This comment has been minimized.

Copy link

@robswhitmore robswhitmore commented Jan 25, 2020

Late to the conversation, but wondering if anyone knows how to use an included file in the collapsed content? When I tried it, the content shows up as unresolved markdown.
Here's how I tried it:

<details>
  <summary>More...</summary>

{% include paths/myfile.md %}

</details>
@jmhulbert

This comment has been minimized.

Copy link

@jmhulbert jmhulbert commented Feb 2, 2020

Great progress, just wanted to pointed out the command currently breaks my floating TOC when used with .tabset.

YAML
title: "Test" output: html_document: toc: TRUE toc_depth: 3 toc_float: TRUE

Heading 1 {.tabset .tabset-fade}

Expand

Heading 1a

Content 1a

Heading 1b

Content 1b

Heading 2

Content 2

Heading 3

Content 3

@marian-c

This comment has been minimized.

Copy link

@marian-c marian-c commented Feb 28, 2020

If you want code in the summary, you can use the code tag

some Code, aham

the details

<details>
  <summary>some <code>Code</code>, aham</summary>
   
  ```the details```

</details>
@olenm

This comment has been minimized.

Copy link

@olenm olenm commented Mar 12, 2020

example:

for using a collapse-able list-item:

  • example 1

  • example 2

  • example 3 (click to expand)
    weee
      weee
    weee
    

    note the newlines and indents

  • example 4

code:

for using a collapse-able list-item:
- example 1
- example 2
- <details><summary>example 3 (click to expand)</summary>

  \```text
  weee
    weee
  weee
  \```
  `note the newlines and indents - and the \ was added in front of ``` to escape the code-section (remove it for actual use)`
</details>

- example 4
@Simo-lu

This comment has been minimized.

Copy link

@Simo-lu Simo-lu commented Mar 31, 2020

Hi guys, I'm new here & this thread helped me a lot so far.
Any idea how to add a table under 'click to expand'? I generated a table with Markdown but it shows up very messy. Thank you.

@Syzygianinfern0

This comment has been minimized.

Copy link

@Syzygianinfern0 Syzygianinfern0 commented Mar 31, 2020

Don't Click Me
I said Don't!
print("Markdown is Awesome!")
@moldach

This comment has been minimized.

Copy link

@moldach moldach commented May 3, 2020

Maybe I'm doing something wrong but soon as I try to include <- or = I'm getting an error:

# A collapsible section containing code
<details>
  <summary>Click to expand!</summary>
  
  ```r
    library(plotly)
    library(tidyverse)
    library(RColorBrewer)
    library(magrittr)
    # Define a custom palette with HTML codes
    # Using a muted 9-colour qualitative colour scheme that's colour-blind safe: https://personal.sron.nl/~pault/#sec:qualitative
    df <- read.csv("data/celegans_pieChart.csv")

```
@csukuangfj

This comment has been minimized.

Copy link

@csukuangfj csukuangfj commented May 7, 2020

thanks
void thank_you() {}
@omril1

This comment has been minimized.

Copy link

@omril1 omril1 commented May 16, 2020

❤ Thank You

@pedrohenriquerissato

This comment has been minimized.

Copy link

@pedrohenriquerissato pedrohenriquerissato commented May 26, 2020

❤ Thank You

Hello there, could you expose the code for insert image inside the details?! For some reason your comment does not show on API gist comments ;(

@dlmgary

This comment has been minimized.

Copy link

@dlmgary dlmgary commented May 28, 2020

@pedrohenriquerissato try:

<details>
<summary>:heart: Thank you</summary>

![Thank you](https://camo.githubusercontent.com/4fd95715cff5db944532897c286e526780e90660/68747470733a2f2f6d65646961332e67697068792e636f6d2f6d656469612f53396f4e4743314534325654324a527973762f67697068792e676966)
</details>  
❤️ Thank you

Thank you

@pedrohenriquerissato

This comment has been minimized.

Copy link

@pedrohenriquerissato pedrohenriquerissato commented May 28, 2020

![Thank you](https://camo.githubusercontent.com/4fd95715cff5db944532897c286e526780e90660/68747470733a2f2f6d65646961332e67697068792e636f6d2f6d656469612f53396f4e4743314534325654324a527973762f67697068792e676966)

Thank You! : )
VSCode does not render images inside details tag at all (local ou remote)
Sublime Plugin Markdown HTML Preview does not render at all (local or remote) on "Markdown HTML Preview" nor on options Markdown "Preview: Preview in Browser" -> github and gitlab. Only renders correctly both (remote and local) on subitem "Markdown".

@elin35

This comment has been minimized.

Copy link

@elin35 elin35 commented May 29, 2020

Hi I was wondering about getting this to work in Github pages because the markdown doesn't properly format and it comes out verbatim when you expand. I know the solution posted a while ago is to change the markdown processor to CommonMarkGhPages instead of kramdown, but I need kramdown for mathjax to type LaTeX in my website.

Does anyone have a workaround so that you can keep kramdown?

@whatisracism

This comment has been minimized.

Copy link

@whatisracism whatisracism commented Jun 2, 2020

@GreatFireWall I only managed to do that by adding a full empty line right after the <summary>. the line break appears in the summary tho

The Summary

Did you resolve this, @leoschet? I'm having the same problem.

@chadh

This comment has been minimized.

Copy link

@chadh chadh commented Jun 12, 2020

@whatisracism , @marian-c had the answer. use <code></code>

@MERZAK-X

This comment has been minimized.

Copy link

@MERZAK-X MERZAK-X commented Jun 27, 2020

Show code
<details>
  <summary><b>Show code</b></summary>

</details>
@idichekop

This comment has been minimized.

Copy link

@idichekop idichekop commented Jun 30, 2020

Thank you! That is a great tip. Always wanted to do that!

@yongmenglee

This comment has been minimized.

Copy link

@yongmenglee yongmenglee commented Jul 25, 2020

Hi I was wondering about getting this to work in Github pages because the markdown doesn't properly format and it comes out verbatim when you expand. I know the solution posted a while ago is to change the markdown processor to CommonMarkGhPages instead of kramdown, but I need kramdown for mathjax to type LaTeX in my website.

Does anyone have a workaround so that you can keep kramdown?

I just faced the same issue, hope this link helps: https://www.endtoend.ai/blog/collapsible-code-blocks/

(hint: scroll down to Method 1. The “safe”, arduous way, no need to change markdown to CommonMarkGhPages)

@Manpreet-Bhatti

This comment has been minimized.

Copy link

@Manpreet-Bhatti Manpreet-Bhatti commented Jul 28, 2020

Is it possible to indent nested collapsible lists?
Section A
Section B

Add padding-left to the details tag of nested collapsible

@masoodbinmohammad

This comment has been minimized.

Copy link

@masoodbinmohammad masoodbinmohammad commented Jul 28, 2020

Show code

Thanks i needed this

@NikhilKukreja26

This comment has been minimized.

Copy link

@NikhilKukreja26 NikhilKukreja26 commented Aug 4, 2020

Amazing.....
Thank you so much 💯

@MuhammedBeraKoc

This comment has been minimized.

Copy link

@MuhammedBeraKoc MuhammedBeraKoc commented Aug 13, 2020

You are awesome guys! Thanks so much.

@jpiversen

This comment has been minimized.

Copy link

@jpiversen jpiversen commented Aug 19, 2020

Great progress, just wanted to pointed out the command currently breaks my floating TOC when used with .tabset.

I had a similar problem: Using the command would break my floating TOC, even without {.tabset}.

The solution for me was to indent everything between <details> and </details>, like it's done in the original example.

@oldthreefeng

This comment has been minimized.

Copy link

@oldthreefeng oldthreefeng commented Aug 22, 2020

thanks ~~

Click to expand to show logs!
    [root@dev-k8s-master ssh]# journalctl -u kubelet -n 1 | grep "use of closed network connection"
    [root@dev-k8s-master ssh]# journalctl -u kubelet -n 1 | grep "use of closed network connection"
    [root@dev-k8s-master ssh]# journalctl -u kubelet -n 1 | grep "use of closed network connection"
@AsifMohamed

This comment has been minimized.

Copy link

@AsifMohamed AsifMohamed commented Sep 6, 2020

I Need this code working on my HTML This is working in only github can someone help i need this on my HTML
@snipperbytes

This comment has been minimized.

Copy link

@snipperbytes snipperbytes commented Sep 11, 2020

I hope it will help someone!

25 Days of month
🔖 C-1 ✍ 🔖 C-2 ✍ 🔖 C-3 ✍ 🔖 C-4 ✍ 🔖 C-5 ✍
  • Day ↠ 1️⃣
  • Day ↠ 2️⃣
  • Day ↠ 3️⃣
  • Day ↠ 4️⃣
  • Day ↠ 5️⃣
  • Day ↠ 6️⃣
  • Day ↠ 7️⃣
  • Day ↠ 8️⃣
  • Day ↠ 9️⃣
  • Day ↠ 1️⃣0️⃣
  • Day ↠ 1️⃣1️⃣
  • Day ↠ 1️⃣2️⃣
  • Day ↠ 1️⃣3️⃣
  • Day ↠ 1️⃣4️⃣
  • Day ↠ 1️⃣5️⃣
  • Day ↠ 1️⃣6️⃣
  • Day ↠ 1️⃣7️⃣
  • Day ↠ 1️⃣8️⃣
  • Day ↠ 1️⃣9️⃣
  • Day ↠ 2️⃣0️⃣
  • Day ↠ 2️⃣1️⃣
  • Day ↠ 2️⃣2️⃣
  • Day ↠ 2️⃣3️⃣
  • Day ↠ 2️⃣4️⃣
  • Day ↠ 2️⃣5️⃣
<details>
 <summary>25 Days of month</summary>
 
 
| 🔖 C-1 ✍ | 🔖 C-2  ✍ | 🔖 C-3 ✍ | 🔖 C-4 ✍ | 🔖 C-5 ✍ |
|---|---|---|---|---|
|<ul><li>- [ ] Day ↠ 1️⃣</li></ul>|<ul><li>- [ ] Day ↠ 2️⃣</li></ul>|<ul><li>- [ ] Day ↠ 3️⃣</li></ul>|<ul><li>- [ ] Day ↠ 4️⃣</li></ul>| <ul><li>- [ ] Day ↠ 5️⃣</li></ul>|
|<ul><li>- [ ] Day ↠ 6️⃣</li></ul>|<ul><li>- [ ] Day ↠ 7️⃣</li></ul>|<ul><li>- [ ] Day ↠ 8️⃣</li></ul>|<ul><li>- [ ] Day ↠ 9️⃣</li></ul>| <ul><li>- [ ] Day ↠ 1️⃣0️⃣</li></ul>|
|<ul><li>- [ ] Day ↠ 1️⃣1️⃣</li></ul>|<ul><li>- [ ] Day ↠ 1️⃣2️⃣</li></ul>|<ul><li>- [ ] Day ↠ 1️⃣3️⃣</li></ul>|<ul><li>- [ ] Day ↠ 1️⃣4️⃣</li></ul>|<ul><li>- [ ] Day ↠ 1️⃣5️⃣</li></ul>|
|<ul><li>- [ ] Day ↠ 1️⃣6️⃣</li></ul>|<ul><li>- [ ] Day ↠ 1️⃣7️⃣</li></ul>|<ul><li>- [ ] Day ↠ 1️⃣8️⃣</li></ul>|<ul><li>- [ ] Day ↠ 1️⃣9️⃣</li></ul>|<ul><li>- [ ] Day ↠ 2️⃣0️⃣</li></ul>|
|<ul><li>- [ ] Day ↠ 2️⃣1️⃣</li></ul>|<ul><li>- [ ] Day ↠ 2️⃣2️⃣</li></ul>|<ul><li>- [ ] Day ↠ 2️⃣3️⃣</li></ul>|<ul><li>- [ ] Day ↠ 2️⃣4️⃣</li></ul>|<ul><li>- [ ] Day ↠ 2️⃣5️⃣</li></ul>|

</details>
<?php
  echo "Hello Everyone";
?>
@LayneTheEpic

This comment has been minimized.

Copy link

@LayneTheEpic LayneTheEpic commented Sep 14, 2020

Test

Hopefully this works!

@fadhleryani

This comment has been minimized.

Copy link

@fadhleryani fadhleryani commented Oct 13, 2020

header

why oh why?

why is the arrow not next to header
  <summary> 
   <h2>header</h2>
   </summary>

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

This comment has been minimized.

Copy link

@slkh slkh commented Oct 18, 2020

I had the exact same issue with kramdown. After so much "research" I found the solution, which includes the following:

  1. Add markdown="span" to the <summary> tag.
  2. In order to have the heading formatting to whatever text you have inside <summary> you need to add the following to your css:
    summary h2, summary h3{ display: inline-block; } // you can add different heading tags obviously
    

And now whatever you have will look something like this (This works for kramdown and does not display correctly for gfm)

<details>

<summary markdown="block"> 
   ## header
   </summary>

 why is the arrow not next to header?
  
</details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.