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!

Hello.
The math section seems to not work under the nested <details> section.

Here is an example

<details>
<summary>Works correct</summary>

Text without math
```math
x^3 + \sqrt{3} = (a + \sqrt{3})^3 + \sqrt{3} = a^3 + 3a^2 \sqrt{3} + 9a + 4 \sqrt{3} = (a^3 + 9a) + \sqrt{3}(3a^2 + 4).
```
</details>

Works correct

Text without math

$$x^3 + \sqrt{3} = (a + \sqrt{3})^3 + \sqrt{3} = a^3 + 3a^2 \sqrt{3} + 9a + 4 \sqrt{3} = (a^3 + 9a) + \sqrt{3}(3a^2 + 4).$$

but this one doesn't

<details>
<summary>Doesn't work</summary>

Some formulas in collapsed section $x$ and
```math
x^3 + \sqrt{3} = (a + \sqrt{3})^3 + \sqrt{3} = a^3 + 3a^2 \sqrt{3} + 9a + 4 \sqrt{3} = (a^3 + 9a) + \sqrt{3}(3a^2 + 4).
```
</details>

Doesn't work

Some formulas in collapsed section $x$ and

x^3 + \sqrt{3} = (a + \sqrt{3})^3 + \sqrt{3} = a^3 + 3a^2 \sqrt{3} + 9a + 4 \sqrt{3} = (a^3 + 9a) + \sqrt{3}(3a^2 + 4).