How to add a collapsible section in markdown.

markdown-details-collapsible.md

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!

test

Hello everyone here

code:

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

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.

Are any thoughts how to fix this?

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>

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]

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

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.

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

  

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

images

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

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

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.

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

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

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.

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

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

'''
code block
code block
'''

</details>

code block

code block
code block

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

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

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

This is very nice - thanks!

Do you have a suggestion for a simple theme (Jekyll?) that would include clickable bars for [sub]sections and for subsections to be indented appropriately? - like this:

http://pricom.com.au/gc.png

where greyed [sub]sections are unopened.

This is very nice - thanks!

Do you have a suggestion for a simple theme (Jekyll?) that would include clickable bars for [sub]sections and for subsections to be indented appropriately? - like this:

http://pricom.com.au/gc.png

where greyed [sub]sections are unopened.

What about nesting them, add "open" to the ones u want open from the start and nothing/default behaviour to the grey one? (https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab#33-nested-collapsible-sections) ?

I'm working on trying to use this in a wiki sidebar where there is nesting inside of nesting, and the nested parts are also links.
Here's what it basically looks like so far:

MISC

• stuff a

• stuff b

  Stuff C

  • Stuff c.1
  Stuff D

  • Stuff D.1

• Stuff e

It wasn't working at all at first, but once I added all the blanks lines it started to mostly work. The functionality is there, but I have two nitpicks.

Does anyone know how to get 'stuff c' and 'stuff d' at the same level of indention as stuff a,b and e.
And does anyone know how to get the spacing around 'stuff c.1' and 'stuff d.1'

<details>

<summary> MISC </summary>

  - [stuff a](stuff-a)
  - [stuff b](stuff-b)


    <details>

    <summary> <a href="Link to Stuff C">Stuff C</a> </summary>

    - [Stuff c.1](stuff-c-1)

    </details>

    <details>

    <summary> <a href="Link to Stuff D">Stuff D</a> </summary>

      - [Stuff D.1](stuff-d-1)

    </details>

  - [Stuff e](stuff-e)

</details>