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!

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.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.