Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to add a collapsible section in markdown.

How to

<details>
  <summary>Click me</summary>
  
  ### Heading
  1. Foo
  2. Bar
     * Baz
     * Qux

  ### Some Code
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```
</details>

Example

Click me

Heading

  1. Foo
  2. Bar
    • Baz
    • Qux

Some Code

function logSomething(something) {
  console.log('Something', something);
}

Rules

  1. Have an empty line after the </summary> tag or markdown/code blocks will not render.
  2. Have an empty line after each </details> tag if you have multiple collapsible sections.
@brunolnetto
Copy link

@KishanMistri Well done! I am afraid, this is not what I expected, i.e., a broken assert. :-P

In this case, I suppose there are multiple interpretations:

  1. A table of contents (a.k.a. list of hrefs) and collapsible headers;
  2. A table of contents as a list of collapsible content;

You gave us 2. I meant 1. Both are great regardless.

@hsambhi18
Copy link

Should also add about Chrome extensions that Magical can help @vjpr.

@Aviva0304
Copy link

why can I only use html in label , not markdown syntax?
I do this:
1. Before and after markdown syntax, I add empty line
2. I even download @pierrejoubert73 markdown file

Above , it still not work. 😞

Click me !
 ### topic 1
        
        - 1
       
        - 2
        
  <h4>example</h4>

Someone could help me ? Thanks a lot 😸

@ne-sharma
Copy link

ne-sharma commented Mar 17, 2023

is it really working!

Markdown for collapsible content goes here.

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