Skip to content

Instantly share code, notes, and snippets.

@pierrejoubert73
Last active October 5, 2024 00:18
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!
@Aviva0304
Copy link

is it really working!

thanks a lot , I will try again!

@NitkarshChourasia
Copy link

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?

@KosiOju
Copy link

KosiOju commented Apr 2, 2023

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?

vscode vscode jupyter jupyter

thank you!

@TheBoxyBear
Copy link

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

@BrendaMoxley
Copy link

BrendaMoxley commented Apr 17, 2023

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.

@osalbahr
Copy link

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?

@TheBoxyBear
Copy link

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.

@FeiYing9
Copy link

FeiYing9 commented May 17, 2023

is `json` ok? ### notice >{ >"hello": "world"} >
func main(){
}
{
"hello": "world"
}

@dimaslanjaka
Copy link

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.


@dimaslanjaka
Copy link

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.

@lidgnulinux
Copy link

Thanks.

@emvhaccuranker
Copy link

emvhaccuranker commented Jun 29, 2023

Click me

Test

hello

@ELowry
Copy link

ELowry commented Jul 1, 2023

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>

@bigmasonwang
Copy link

Title

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

@illegitimate-egg
Copy link

Can you nest them?
Can you nest them?

@joaoantoniocardoso
Copy link

joaoantoniocardoso commented Aug 4, 2023

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>

@fightling
Copy link

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

@MelSumner
Copy link

MelSumner commented Aug 8, 2023

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:

@ZhengYuan-Public
Copy link

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

@pierrejoubert73
Copy link
Author

pierrejoubert73 commented Aug 17, 2023

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.

@brunolnetto
Copy link

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

@sbmali
Copy link

sbmali commented Sep 30, 2023

Click me

Heading

  1. Foo
  2. Bar
    • Baz
    • Qux

Some JavaScript

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

@NitkarshChourasia
Copy link

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

@florian-guily
Copy link

i test stuff

@MarcosYonamine963
Copy link

Nested details:

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

@Sterh20
Copy link

Sterh20 commented Dec 12, 2023

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>

@brunolnetto
Copy link

@Sterh20 the table rendering works without markup <summary>Click me</summary>.

@Sterh20
Copy link

Sterh20 commented Dec 12, 2023

@Sterh20 the table rendering works without markup <summary>Click me</summary>.

@brunolnetto
I was too hasty. Turns out you can make it work with summary section too. You just need to add additional empty line after summary section:

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>

@brunolnetto
Copy link

Marvelous! 🥂

@jonchen727
Copy link

Block quotes don't work

[!NOTE]
Not working :(

Note

It works here

<details>

<summary>Block quotes don't work</summary>

> [!NOTE]
> Not working :(

</details>

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