Skip to content

Instantly share code, notes, and snippets.

@pierrejoubert73
Last active June 19, 2024 00:04
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!
@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>

@tmarkovski
Copy link

tmarkovski commented Jun 4, 2024

You can also use code highlighting in the body or summary, with a caveat: must use <code>hello</code> block, and not backticks `hello` when in summary.

Code:

<details>
<summary>Contents of <code>file.txt</code></summary>

```
[File contents inside code block]
```
</details>

Rendered:

Contents of file.txt
[File contents inside code block]

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