Skip to content

Instantly share code, notes, and snippets.

@pierrejoubert73
Last active December 13, 2024 09:47
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!
@raynbowbrite
Copy link

raynbowbrite commented Oct 22, 2024

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

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>

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