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!

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