Skip to content

Instantly share code, notes, and snippets.

@pierrejoubert73
Last active May 20, 2024 22:17
Show Gist options
  • Save pierrejoubert73/902cc94d79424356a8d20be2b382e1ab to your computer and use it in GitHub Desktop.
Save pierrejoubert73/902cc94d79424356a8d20be2b382e1ab to your computer and use it in GitHub Desktop.
How to add a collapsible section in markdown.

How to add a collapsible section in markdown

1. Example

Click me

Heading

  1. Foo
  2. Bar
    • Baz
    • Qux

Some Javascript

function logSomething(something) {
  console.log('Something', something);
}

2. Code/Markdown

<details>
  <summary>Click me</summary>
  
  ### Heading
  1. Foo
  2. Bar
     * Baz
     * Qux

  ### Some Javascript
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```
</details>

3. Tips & Tricks

3.1 Expand by Default

To have a collapsible section expanded by default, simply include the 'open' attribute within the <details> tag:

Hello World!
<details open>
  <summary>Hello</summary>
  World!
</details>

3.2 Customize Clickable Text

You can modify the appearance of the clickable text by adding styling inside the <summary> tags:

Wow, so fancy WOW, SO BOLD
<details>
  <summary><i>Wow, so fancy</i></summary>
  <b>WOW, SO BOLD</b>
</details>

3.3 Nested Collapsible Sections

NB: When including headings within collapsible sections, remember to add a new line after the <summary> tag.

Section A
Section A.B
Section A.B.C
Section A.B.C.D Done!
<details>
<summary>Section A</summary>
<details>
<summary>Section A.B</summary>
<details>
<summary>Section A.B.C</summary>
<details>
<summary>Section A.B.C.D</summary>
  Done!
</details>
</details>
</details>
</details>

Troubleshooting

  • If certain markdown or styling, such as # My Title, fails to render in the collapsible section, try adding a line break after the </summary> tag.
  • If your section fails to render, it might be malformed. Consider copying the functional examples provided here and building from there!
@beatrizsmerino
Copy link

Hi @moshiurse!

I have the same problem, although it didn't happen a few days ago.

Here you can see something about:

I tried everything and in the end I had to use svg images.
In short, the problem is that a few days ago Github didn't treat h1 etc. as block elements, so the arrow and the title were seen side by side.

@DolevArtzi
Copy link

@Sterh20 the table rendering works without markup <summary>Click me</summary>.

@brunolnetto I was too hasty. Turns out you can make it work with summary section too. You just need to add additional empty line after summary section:

Click me

<details>

  <summary>Click me</summary>

  | Header 1 | Header 2 |
  | -------- | -------- |
  | Row 1    | Row 1    |
  | Row 2    | Row 2    |
  
</details>

Wanted to add that this also works for LaTeX, including double $$ blocks. see example:


Rendered Output:

Proof of variance of geometric

Reveal Proof To compute the variance of $X$, where $X \sim \text{Geom}(p)$, we'll start by finding the second moment. $$E[X^2] = E[X^2 \mid A]P[A] + E[X^2 \mid A^c]P[A^c]$$

Code:

 <details><summary>Reveal Proof</summary>
 To compute the variance of $X$, where $X \sim \text{Geom}(p)$, we'll start by finding the second moment. 
 $$E[X^2] = E[X^2 \mid A]P[A] + E[X^2 \mid A^c]P[A^c]$$
</details>```

@jhj0517
Copy link

jhj0517 commented Apr 5, 2024

Hi! I want to test if I can embed image inside detail.

demo Content1

Content2

ForegroundService

It works! very thanks.

@brendanmaguire
Copy link

Click The rest

@KelvinKaungDev
Copy link

@lebathang
Copy link

test Hello everyone here

code:

 <details>
 <summary>test</summary>
 <b>Hello everyone here<b>
 </details>

@vinser
Copy link

vinser commented Apr 29, 2024

Using this code in my project README.md on GitHub

### Setup and fine tuning
<details>
<summary><i><h4>1. Main configuration file</h4></i></summary>
For advanced sutup you can edit `config/config.yml` selfexplanatory configuration file.  
This file by default is located in `config` subfolder of program file location.
</details>

I get what it should be:

Setup and fine tuning

1. Main configuration file

For advanced sutup you can edit `config/config.yml` selfexplanatory configuration file. This file by default is located in `config` subfolder of program file location.

But when I use the same code on GitHub Pages with classic minima skin I get line break between marker and summary tip the same as moshiurse wrote above.
image

Are any thoughts how to fix this?

@mayank7j-shell
Copy link

Testing if really need to add indentation. Turns out, not really.

Click me
Header 1 Header 2
Row 1 Row 1
Row 2 Row 2

Code:

<details>

<summary>Click me</summary>

| Header 1 | Header 2 |
| -------- | -------- |
| Row 1    | Row 1    |
| Row 2    | Row 2    |
  
</details>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment