Skip to content

Instantly share code, notes, and snippets.

@pierrejoubert73
Last active October 5, 2024 00:18
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!
@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]

@Mark-Landucci
Copy link

Is it possible to place a collapsible section in a table? To have several table rows that the user can expand or collapse?

@Mark-Landucci
Copy link

For example, can I place these in a table with columns and rows? I've been trying, but haven't figured out a way to do it correctly.

Dogs Likes to bark a lot.
Cats Likes to meow at night.
Birds Likes to fly away.

@Oednerich
Copy link

is there a way to put uploaded image files inside a collapsible section?
I'd like to put screenshots there, because even small ones are getting blown up in chat making it unnecessary difficult to navigate.
but all i get when doing it is this:

my uploaded screenshots ![jellyfin-idle](https://github.com/user-attachments/assets/73614b31-ba66-4182-aed5-f87525a35dd3) ![jellyfin-1x4kstream](https://github.com/user-attachments/assets/a8a94fde-c0d5-46c2-925d-de4ab7f57aa2) ![jellyfin-2x4kstream](https://github.com/user-attachments/assets/516a7da0-afbe-42a3-9a99-b48aa11a1657)

@jhj0517
Copy link

jhj0517 commented Aug 1, 2024

@Oednerich It works. You have to make sure there are two line breaks between each image.

images

Image1

Image2

<details>
  <summary>images</summary>

![Image1](https://gist.github.com/assets/97279763/4eb87d13-17b1-4384-bfc6-ba3369bc7223)

![Image2](https://gist.github.com/assets/97279763/4eb87d13-17b1-4384-bfc6-ba3369bc7223)

</details>

@Oednerich
Copy link

@jhj0517 thank you! what a silly mistake, I thought line breaks wouldn't matter

@BenKohls
Copy link

I found this while looking into a similar issue with Gitlab readme files. It seems that the issue is with the devault css on the h1-h* tags. Adding an inline style resolved the issue for me. Borrowing from the example above :

<details>
<summary><i><h2  style="display:inline-block">1. Main configuration file</h2></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>

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.

@jcdiv47
Copy link

jcdiv47 commented Aug 13, 2024

@BenKohls Thanks! Adding the inline style also worked for me.

@ooker777
Copy link

ooker777 commented Sep 2, 2024

I'd like to give emoji to this , but there is no option. Why is that?

@lut777
Copy link

lut777 commented Sep 5, 2024

Is there a way to collapse a code block?
When I write down some blogs, I always want to record the source code for further explanation.
However, a long code block is really a pain in the ass in writing and reading.

@jhj0517
Copy link

jhj0517 commented Sep 5, 2024

@lut777 Use ``` for code block ( ''' for explanation )

<details>
  <summary>code block</summary>

'''
code block
code block
'''

</details>
code block
code block
code block

@lut777
Copy link

lut777 commented Sep 6, 2024

@lut777 Use ``` for code block ( ''' for explanation )

<details>
  <summary>code block</summary>

'''
code block
code block
'''

</details>

code block

code block
code block

seems good. Thank you!
In Typora it does not work. I think I need to find a new editor now...
tried in visual studio, failed.

@GerardoPCO
Copy link

GerardoPCO commented Sep 24, 2024

<details>
<summary><h5>See Here</h5></summary>

image

But it is going down. Can you help me to fix?

adding "open" works for me: <details open><summary>My summary</summary></details>

My summary

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