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 with markdown

Click to expand!

Heading

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

A collapsible section with code

Click to expand!
  function whatIsLove() {
    console.log('Baby Don't hurt me. Don't hurt me');
    return 'No more';
  }

How to structure the markup

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

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

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.