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 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 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 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 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 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 commented Nov 6, 2018

Thanks! 👍
Quite useful

@greymonroe

This comment has been minimized.

Copy link

greymonroe commented Dec 1, 2018

@pascalandy

This comment has been minimized.

Copy link

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

Already open...

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

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

@MarissaHeloise

This comment has been minimized.

Copy link

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 commented Apr 11, 2019

@Juice10 That's cool!

@pierrejoubert73

This comment has been minimized.

Copy link
Owner Author

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 commented May 28, 2019

Click to expand!

Heading

dsadsadsadsadsadsadsadsa

@KepanoEgg

This comment has been minimized.

Copy link

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

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

@arthursoas

This comment has been minimized.

Copy link

arthursoas commented Aug 2, 2019

Thank you a lot

@vipinkumarr89

This comment has been minimized.

Copy link

vipinkumarr89 commented Aug 10, 2019

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

This comment has been minimized.

Copy link

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 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 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 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 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 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 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 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 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 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 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 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 commented May 7, 2020

thanks
void thank_you() {}
@omril1

This comment has been minimized.

Copy link

omril1 commented May 16, 2020

Thank You

@pedrohenriquerissato

This comment has been minimized.

Copy link

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 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 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 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 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 commented Jun 12, 2020

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

@MERZAK-X

This comment has been minimized.

Copy link

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 commented Jun 30, 2020

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

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.