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!

@raynbowbrite Like this?

<details>

<summary> MISC </summary>

<ul>
    <li><a href="Link to Stuff A">Stuff A</a></li>
    <li><a href="Link to Stuff B">Stuff B</a></li>
    <li>
        <details>
            <summary><a href="Link to Stuff C">Stuff C</a></summary>
            <ul>
                <li><a href="Link to Stuff C-1">Stuff C-1</a></li>
            </ul>
        </details>
    </li>
    <li>
        <details>
            <summary><a href="Link to Stuff D">Stuff D</a></summary>
            <ul>
                <li><a href="Link to Stuff D-1">Stuff D-1</a></li>
            </ul>
        </details>
    </li>
    <li><a href="Link to Stuff E">Stuff E</a></li>
</ul>
</details>

MISC

• Stuff A
• Stuff B
• Stuff C

  • Stuff C-1
• Stuff D

  • Stuff D-1
• Stuff E

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