{{ message }}

Instantly share code, notes, and snippets.

# pierrejoubert73/markdown-details-collapsible.md

Last active Feb 24, 2021
How to add a collapsible section in markdown.

# A collapsible section containing markdown

Click to expand!

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>

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 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 commented Sep 12, 2018 • edited

 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 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. 
I could use some help...

c# public class Order { public int OrderId { get; set; } public int CustomerId { get; set; } public List Products { get; set; } } \



### pierrejoubert73 commented Oct 11, 2018

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

### jsaintvanne commented Oct 16, 2018 • edited

 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 commented Oct 16, 2018 • edited

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

### filiagees commented Nov 6, 2018

 Thanks! 👍 Quite useful

### greymonroe commented Dec 1, 2018 • edited

 If you're having trouble getting this to work with guthub pages: https://github.community/t5/GitHub-Pages/Collapsible-markdown-inside-lt-details-gt-lt-summary-gt-lt/td-p/13786

### pascalandy commented Dec 4, 2018 • edited

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

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!

</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 commented Jan 24, 2019

 Already open... 

...



### MarissaHeloise commented Feb 10, 2019

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

### pierrejoubert73 commented Apr 11, 2019

 @Juice10 That's cool!

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

Click to expand!

### 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 commented Jul 2, 2019

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

### arthursoas commented Aug 2, 2019

 Thank you a lot

### vipinkumarr89 commented Aug 10, 2019

 "Click to expand" * testing hide/show feature

### 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?

### 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 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 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. 
I could use some help...

c# public class Order { public int OrderId { get; set; } public int CustomerId { get; set; } public List Products { get; set; } } \

 So, how to use code block in summary ? The Summary Contents. 

### leoschet commented Dec 19, 2019

 @GreatFireWall I only managed to do that by adding a full empty line right after the . the line break appears in the summary tho The Summary more content

### 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: 
More... {% include paths/myfile.md %}


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

Expand

Content 1a

Content 1b

Content 2

Content 3

### marian-c commented Feb 28, 2020 • edited

 If you want code in the summary, you can use the code tag some Code, aham the details 
some Code, aham the details


### 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 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 commented Mar 31, 2020

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

### 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
Click to expand! 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 commented May 7, 2020

 thanks void thank_you() {}

### omril1 commented May 16, 2020 • edited

 ❤ Thank You

### 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 commented May 28, 2020 • edited

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

### pedrohenriquerissato commented May 28, 2020 • edited

 ![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 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 commented Jun 2, 2020

 @GreatFireWall I only managed to do that by adding a full empty line right after the . the line break appears in the summary tho The Summary Did you resolve this, @leoschet? I'm having the same problem.

### chadh commented Jun 12, 2020

 @whatisracism , @marian-c had the answer. use 

### MERZAK-X commented Jun 27, 2020

 Show code 
Show code


### idichekop commented Jun 30, 2020

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

### 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 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 commented Jul 28, 2020 • edited

 Show code Thanks i needed this

### NikhilKukreja26 commented Aug 4, 2020

 Amazing..... Thank you so much 💯

### MuhammedBeraKoc commented Aug 13, 2020

 You are awesome guys! Thanks so much.

### 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
and
, like it's done in the original example.

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

## 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 commented Sep 14, 2020

 Test Hopefully this works!

### fadhleryani commented Oct 13, 2020

why oh why?

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

why is the arrow not next to header?

</details>


### 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: Add markdown="span" to the  tag. In order to have the heading formatting to whatever text you have inside  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) 


### fernandopiniani commented Nov 20, 2020 • edited

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.

@Simo-lu Make sure you're adding and entire empty line before between the table and the summary. Like this:

<details>
<summary>Table</summary>

| variable | example |
|---------|----------|
| abc | 123 |

</details>

Table
variable example
abc 123

### fm-sys commented Dec 14, 2020 • edited

 @pierrejoubert73 Just amazing! Thank you so much!

### davips commented Jan 2, 2021

 Works on github, but... ... doesn't seem to work on pypi website... despite they saying they are using exactly the same renderer. the entire collapsable content was just replaced by the summary as raw text. The same happens in simpler contexts also, but I already changed it to a less fancy/pypi compatible(?) mode in the other cases.

### stackman27 commented Jan 10, 2021 • edited

 This code... minwallet._utxos.append({'txid': txid, 'vout': 0, 'value': send_value}) tx_info = node.getmempoolentry(txid) assert_equal(tx_info['fee'], fee) large_txids.append({'txid': txid, 'wtxid': tx_info['wtxid'], 'hex': tx_hex}) 

### rclark1 commented Jan 27, 2021

 @Manpreet-Bhatti can you share the full code for nesting, please?

### ChiefMikeK commented Feb 15, 2021 • edited

@AsifMohamed

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