How to add a collapsible section in markdown.

Nox Fortes
2023-08-24T12:07:01Z

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


Click me

  ### Heading
  1. Foo
  2. Bar
     * Baz
     * Qux

  ### Some Javascript
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```


3. Tips & Tricks

Discover some handy customizations for your collapsible sections.

3.1 Expand by Default

To have a collapsible section expanded by default, simply include the 'open' attribute within the tag:

Hello
World!


Hello
  World!


3.2 Customize Clickable Text

You can modify the appearance of the clickable text by adding styling inside the tags:

Wow, so fancy
WOW, SO BOLD


Wow, so fancy
WOW, SO BOLD


3.3 Nested Collapsible Sections

NB: When including headings within collapsible sections, remember to add a new line after the tag.

Section A

Section A.B

Section A.B.C

Section A.B.C.D
Done!


Section A

Section A.B

Section A.B.C

Section A.B.C.D
  Done!





Troubleshooting

If certain markdown or styling, such as # My Title, fails to render in the collapsible section, try adding a line break after the tag.

If your section fails to render, it might be malformed. Consider copying the functional examples provided here and building from there!