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!

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

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

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 😸

is it really working!

Markdown for collapsible content goes here.

is it really working!

thanks a lot , I will try again!

Click me, babe.

Click me, again, babe.

Nested 'click me' works, wonderfully. See!

Click me, again, Babe 2.

Just testing multiple, hidden stuffs.

Hello, There.

How are you, guys?

That is great! Thanks for documenting this.

I was surprised to see that this does work in VS Code. And even in Jupyter, within a Markdown cell! Does anyone knows if we can use this to collapse mutliple cells of a Jupyter notebook?

thank you!

Got embeded collapsible sections to work, however would it be possible to add tabbing before the clickable arrow for clarity?

Thank you, you made my day. I'm a college student looking for the best writing services available online. While doing my research, I came across this website: https://www.topwritersreview.com/reviews/oxbridgeessays/ where I can read reviews of different websites to help me decide which one is best for me. Ultimately, I chose oxbridgeessays, which enables me to finish my essay assignment on time.

Got embeded collapsible sections to work, however would it be possible to add tabbing before the clickable arrow for clarity?

What do you mean by tabbing before the clickable?

Got embeded collapsible sections to work, however would it be possible to add tabbing before the clickable arrow for clarity?

What do you mean by tabbing before the clickable?

To better represent the structure the the document, I add tabbing to the body of collapsible sections. I would like it to also apply to the arrow when a section is inside another section.

is `json` ok?

### notice >{ >"hello": "world"} >

func main(){
}

{
"hello": "world"
}

Hyperlink test

*WARNING: git filter-branch is no longer officially recommended.

The official recommendation is to use git-filter-repo.

see André Anjos' answer for details.

---

Is invalid hyperlink?

*WARNING: git filter-branch is no longer officially recommended.

The official recommendation is to use git-filter-repo.

see André Anjos' answer for details.

---

If you are here to copy-paste code:

This is an example which removes node_modules from history

git filter-branch --tree-filter "rm -rf node_modules" --prune-empty HEAD
git for-each-ref --format="%(refname)" refs/original/ | xargs -n 1 git update-ref -d
echo node_modules/ >> .gitignore
git add .gitignore
git commit -m 'Removing node_modules from git history'
git gc
git push origin master --force

What git actually does:

The first line iterates through all references on the same tree (--tree-filter) as HEAD (your current branch), running the command rm -rf node_modules. This command deletes the node_modules folder (-r, without -r, rm won't delete folders), with no prompt given to the user (-f). The added --prune-empty deletes useless (not changing anything) commits recursively.

The second line deletes the reference to that old branch.

The rest of the commands are relatively straightforward.

Thanks.

Click me

Test

hello

Also, for anyone interested, you CAN get the summary to work as a title; you just have to use html tags:

This is an h2 title

And it is collapsible!

Here's how it works:

<details><h2><summary>This is an h2 title</summary></h2>
Content goes here.
</details>

Title

content

<details>
  <summary>
    <h2>
      Title
    </h2>
  </summary>
  content
</details>

Can you nest them?

Can you nest them?

And it can also be used to collapse quotations

:)

> <details> <summary> And it can also be used to collapse quotations </summary>
> <h1> :) </h1>
> </details></details>

Is it also possible to have a "expand/collapse all" button?

A <summary> element is a button, so anything inside that element will be marked as presentational. It might provide the visual presentation you wish, but a user with a screen reader will not know that it's a heading.

This might not matter to you (anyone reading this) personally, but it would matter to a user with assistive technology. So I guess, just a heads up.

For folks who want to read more for their own self-education:

• https://daverupert.com/2019/12/why-details-is-not-an-accordion/
• https://melsumner.github.io/details-as-a-menu

Thanks for sharing. It would be perfect if you could mention the default can be opened by using <details open> at the beginning.

Thanks for sharing. It would be perfect if you could mention the default can be opened by using <details open> at the beginning.

Done! Added a new tips section. I'll review the comments and add things that are not too specific, obscure, or niche.

I'll consider adding an advanced section for the more technical things in time.

Sorry for being such a bad dad to this thread.

@sahil743 the style was not applied. Please, try to do it again.

Click me

Heading

1. Foo
2. Bar
   • Baz
   • Qux

Some JavaScript

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

Who are you?

Who are you?

I am Nitkarsh. Who are you? Why are you disturbing me, bitch!!

i test stuff

Nested details:

• 1 Introduction

  • 1.1 Second Level 1

    • 1.1.1 Third 1a
    • 1.1.2 Third 2a
    • 1.1.3 Third 3a
  • 1.2 Second Level 2

    • 1.2.1 Third 1b
    • 1.2.2 Third 2b
    • 1.2.3 Third 3b
  • 1.5 Alone 1
  • 1.6 Alone 2

Code:

  * <details><summary>1 <a href="#"> 1- Introduction</a></summary><ul>
     <li><details><summary> 1.1 <a href=""> Second Level 1 </a> </summary> <ul> 
           <li>1.1.1 <a href=""> Third 1a </a> </li>
           <li>1.1.2 <a href=""> Third 2a</a> </li>
           <li>1.1.3 <a href=""> Third 3a</a> </li>
     </ul></details></li> <!-- End 1 -->
     <li><details><summary> 1.2 <a href=""> Second Level 2 </a> </summary> <ul> 
           <li>1.2.1 <a href=""> Third 1b</a> </li>
           <li>1.2.2 <a href=""> Third 2b</a> </li>
           <li>1.2.3 <a href=""> Third 3b</a> </li>
     </ul></details></li> <!-- End  2-->
     <li>1.5 <a href=""> Alone 1</a> </li>
     <li>1.6 <a href=""> Alone 2</a> </li>
   </ul> <!-- End -->
  </details>

You're welcome

Is their a way to create a collapsible table?
I tried but got this:

Click me

| Header 1 | Header 2 | | -------- | -------- | | Row 1 | Row 1 | | Row 2 | Row 2 |

<details>
  <summary>Click me</summary>
  | Header 1 | Header 2 |
  | -------- | -------- |
  | Row 1    | Row 1    |
  | Row 2    | Row 2    |
</details>