Skip to content

Instantly share code, notes, and snippets.

@pierrejoubert73

pierrejoubert73/markdown-details-collapsible.md

Last active August 3, 2026 01:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pierrejoubert73/902cc94d79424356a8d20be2b382e1ab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pierrejoubert73/902cc94d79424356a8d20be2b382e1ab to your computer and use it in GitHub Desktop.
Download ZIP
How to add a collapsible section in markdown.
Raw
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!
@auwsom

auwsom commented Sep 29, 2022 •
edited
Loading

Copy link
Copy Markdown

Testing if nested open works..and it does. Closed is by default.

<details open><summary>Hello</summary><blockquote>
  <details><summary>World - click me to open</summary><blockquote>
    :smile:
  </blockquote></details>
  <details open><summary>World</summary><blockquote>
    :smile:
  </blockquote></details>
</blockquote></details>
Hello
World - click me to open
😄
World
😄

@auwsom

auwsom commented Sep 29, 2022

Copy link
Copy Markdown

You can also use markdown inside the HTML.
https://gist.github.com/scmx/eca72d44afee0113ceb0349dd54a84a2
I'm trying to find a tool that converts nested lists in markdown to HTML details and blockquotes.

@Realank

Realank commented Oct 14, 2022

Copy link
Copy Markdown
Details
  • Item1
  • Item2
  • Item3

@samuelgfeller

samuelgfeller commented Oct 26, 2022

Copy link
Copy Markdown

It does seem GitHub fixed it but PHPStorm markdown viewer still displays it wrongly:

image

Seems like its broken if you try to put an <h3> inside the <summary>

why is this h3 on the next line?

i think it has something to do with the fact h3 is a block element
edit: looks like it has been fixed

<details>
<summary><h3>why is this h3 on the next line?</h3></summary>
i think it has something to do with the fact h3 is a block element
</details>

@auwsom

auwsom commented Oct 27, 2022 •
edited
Loading

Copy link
Copy Markdown

@samuelgfeller there are a ton of markdown standards floating around. That one must be different than GitHub's.

I noticed today when using the collapse on a bug report in GitHug that it cancels any of GH's formatting, say for "code", which makes sense. But how to combine them? I just tried using the html tag <code>, and it kind of worked but still the text loses the line separation. Is this a part to of the <details>tag, that it removes lines breaks and smushes the text together into one string?

<details><summary>report - click this</summary>
<code>
cpu_adam ............... [NO] ....... [OKAY]
cpu_adagrad ............ [NO] ....... [OKAY]
fused_adam ............. [NO] ....... [OKAY]
</code>
</details>
report - click this cpu_adam ............... [NO] ....... [OKAY] cpu_adagrad ............ [NO] ....... [OKAY] fused_adam ............. [NO] ....... [OKAY]

Update: Oh, weird. It works on Gist, but not on GitHub.

@samuelgfeller

samuelgfeller commented Oct 28, 2022

Copy link
Copy Markdown

@auwsom why not use ```

<details><summary>report - click this</summary>

``` // opening 
cpu_adam ............... [NO] ....... [OKAY]
cpu_adagrad ............ [NO] ....... [OKAY]
fused_adam ............. [NO] ....... [OKAY]
``` // closing
</details>
report - click this 
cpu_adam ............... [NO] ....... [OKAY]
cpu_adagrad ............ [NO] ....... [OKAY]
fused_adam ............. [NO] ....... [OKAY]

@SilentFlute

SilentFlute commented Oct 28, 2022

Copy link
Copy Markdown

@Treevuhh looks like they fixed it!

fantastic, it worked! thx ;)

@ranggakd

ranggakd commented Oct 29, 2022

Copy link
Copy Markdown

The coolest thing is you could make it on beacons.ai markdown like me 🥰😁
Screen_Recording_20221030_024005_Chrome_1

@jisungbin

jisungbin commented Nov 29, 2022

Copy link
Copy Markdown

Thanks!

@StefanHeng

StefanHeng commented Dec 13, 2022 •
edited
Loading

Copy link
Copy Markdown

Trying unordered list

click
  • item 1
  • item 2
  • item 3

@cosminsandu

cosminsandu commented Dec 13, 2022 •
edited
Loading

Copy link
Copy Markdown

Looks like we can't have links/list/checkbox in summary:

* [ ] [PHP and Web Security](/topics/php-and-web-security.md)

@brunolnetto

brunolnetto commented Dec 17, 2022 •
edited
Loading

Copy link
Copy Markdown

Challenge: Create a table of contents for collapsible header sections.

@sxddhxrthx

sxddhxrthx commented Dec 20, 2022 •
edited
Loading

Copy link
Copy Markdown
Hello ### This is a dummy text

@KishanMistri

KishanMistri commented Dec 20, 2022

Copy link
Copy Markdown

Noice..!

Expand to know more

Code Outputs which is not follow a specific format

[{
  'trends': [{
      'name': '#BeratKandili',
      'url': 'http://twitter.com/search?q=%23BeratKandili',
      'promoted_content': None,
      'query': '%23BeratKandili',
      'tweet_volume': 46373
  }, {
      'name': '#GoodFriday',
      'url': 'http://twitter.com/search?q=%23GoodFriday',
      'promoted_content': None,
      'query': '%23GoodFriday',
      'tweet_volume': 81891
  }, {
      'name': '#WeLoveTheEarth',
      'url': 'http://twitter.com/search?q=%23WeLoveTheEarth',
      'promoted_content': None,
      'query': '%23WeLoveTheEarth',
      'tweet_volume': 159698
  }, {
      'name': '#195TLdenTTVerilir',
      'url': 'http://twitter.com/search?q=%23195TLdenTTVerilir',
      'promoted_content': None,
      'query': '%23195TLdenTTVerilir',
      'tweet_volume': None
  }, {
      'name': '#AFLNorthDons',
      'url': 'http://twitter.com/search?q=%23AFLNorthDons',
      'promoted_content': None,
      'query': '%23AFLNorthDons',
      'tweet_volume': None
  }, {
      'name': 'Shiv Sena',
      'url': 'http://twitter.com/search?q=%22Shiv+Sena%22',
      'promoted_content': None,
      'query': '%22Shiv+Sena%22',
      'tweet_volume': None
  }, {
      'name': 'Lyra McKee',
      'url': 'http://twitter.com/search?q=%22Lyra+McKee%22',
      'promoted_content': None,
      'query': '%22Lyra+McKee%22',
      'tweet_volume': 17606
  }, {
      'name': 'Priyanka Chaturvedi',
      'url': 'http://twitter.com/search?q=%22Priyanka+Chaturvedi%22',
      'promoted_content': None,
      'query': '%22Priyanka+Chaturvedi%22',
      'tweet_volume': 22342
  }, {
      'name': 'Derry',
      'url': 'http://twitter.com/search?q=Derry',
      'promoted_content': None,
      'query': 'Derry',
      'tweet_volume': 28234
  }, {
      'name': '池袋の事故',
      'url': 'http://twitter.com/search?q=%E6%B1%A0%E8%A2%8B%E3%81%AE%E4%BA%8B%E6%95%85',
      'promoted_content': None,
      'query': '%E6%B1%A0%E8%A2%8B%E3%81%AE%E4%BA%8B%E6%95%85',
      'tweet_volume': 34381
  }, {
      'name': 'プリウス',
      'url': 'http://twitter.com/search?q=%E3%83%97%E3%83%AA%E3%82%A6%E3%82%B9',
      'promoted_content': None,
      'query': '%E3%83%97%E3%83%AA%E3%82%A6%E3%82%B9',
      'tweet_volume': 22944
  }, {
      'name': 'Hemant Karkare',
      'url': 'http://twitter.com/search?q=%22Hemant+Karkare%22',
      'promoted_content': None,
      'query': '%22Hemant+Karkare%22',
      'tweet_volume': 24067
  }, {
      'name': '高齢者',
      'url': 'http://twitter.com/search?q=%E9%AB%98%E9%BD%A2%E8%80%85',
      'promoted_content': None,
      'query': '%E9%AB%98%E9%BD%A2%E8%80%85',
      'tweet_volume': 28382
  }, {
      'name': '브이알',
      'url': 'http://twitter.com/search?q=%EB%B8%8C%EC%9D%B4%EC%95%8C',
      'promoted_content': None,
      'query': '%EB%B8%8C%EC%9D%B4%EC%95%8C',
      'tweet_volume': 15490
  }, {
      'name': '刀ステ',
      'url': 'http://twitter.com/search?q=%E5%88%80%E3%82%B9%E3%83%86',
      'promoted_content': None,
      'query': '%E5%88%80%E3%82%B9%E3%83%86',
      'tweet_volume': None
  }, {
      'name': '免許返納',
      'url': 'http://twitter.com/search?q=%E5%85%8D%E8%A8%B1%E8%BF%94%E7%B4%8D',
      'promoted_content': None,
      'query': '%E5%85%8D%E8%A8%B1%E8%BF%94%E7%B4%8D',
      'tweet_volume': None
  }, {
      'name': 'Berat Kandilimiz',
      'url': 'http://twitter.com/search?q=%22Berat+Kandilimiz%22',
      'promoted_content': None,
      'query': '%22Berat+Kandilimiz%22',
      'tweet_volume': 10901
  }, {
      'name': 'örgütdeğil arkadaşgrubu',
      'url': 'http://twitter.com/search?q=%22%C3%B6rg%C3%BCtde%C4%9Fil+arkada%C5%9Fgrubu%22',
      'promoted_content': None,
      'query': '%22%C3%B6rg%C3%BCtde%C4%9Fil+arkada%C5%9Fgrubu%22',
      'tweet_volume': None
  }, {
      'name': 'グレア',
      'url': 'http://twitter.com/search?q=%E3%82%B0%E3%83%AC%E3%82%A2',
      'promoted_content': None,
      'query': '%E3%82%B0%E3%83%AC%E3%82%A2',
      'tweet_volume': 23485
  }, {
      'name': '東京・池袋衝突事故',
      'url': 'http://twitter.com/search?q=%E6%9D%B1%E4%BA%AC%E3%83%BB%E6%B1%A0%E8%A2%8B%E8%A1%9D%E7%AA%81%E4%BA%8B%E6%95%85',
      'promoted_content': None,
      'query': '%E6%9D%B1%E4%BA%AC%E3%83%BB%E6%B1%A0%E8%A2%8B%E8%A1%9D%E7%AA%81%E4%BA%8B%E6%95%85',
      'tweet_volume': None
  }, {
      'name': '重体の女性と女児',
      'url': 'http://twitter.com/search?q=%E9%87%8D%E4%BD%93%E3%81%AE%E5%A5%B3%E6%80%A7%E3%81%A8%E5%A5%B3%E5%85%90',
      'promoted_content': None,
      'query': '%E9%87%8D%E4%BD%93%E3%81%AE%E5%A5%B3%E6%80%A7%E3%81%A8%E5%A5%B3%E5%85%90',
      'tweet_volume': None
  }, {
      'name': 'Lil Dicky',
      'url': 'http://twitter.com/search?q=%22Lil+Dicky%22',
      'promoted_content': None,
      'query': '%22Lil+Dicky%22',
      'tweet_volume': 42461
  }, {
      'name': '歩行者',
      'url': 'http://twitter.com/search?q=%E6%AD%A9%E8%A1%8C%E8%80%85',
      'promoted_content': None,
      'query': '%E6%AD%A9%E8%A1%8C%E8%80%85',
      'tweet_volume': 25405
  }, {
      'name': 'Derrick White',
      'url': 'http://twitter.com/search?q=%22Derrick+White%22',
      'promoted_content': None,
      'query': '%22Derrick+White%22',
      'tweet_volume': 27104
  }, {
      'name': '十二国記',
      'url': 'http://twitter.com/search?q=%E5%8D%81%E4%BA%8C%E5%9B%BD%E8%A8%98',
      'promoted_content': None,
      'query': '%E5%8D%81%E4%BA%8C%E5%9B%BD%E8%A8%98',
      'tweet_volume': 46803
  }, {
      'name': '#KpuJanganCurang',
      'url': 'http://twitter.com/search?q=%23KpuJanganCurang',
      'promoted_content': None,
      'query': '%23KpuJanganCurang',
      'tweet_volume': 75384
  }, {
      'name': '#HayırlıCumalar',
      'url': 'http://twitter.com/search?q=%23Hay%C4%B1rl%C4%B1Cumalar',
      'promoted_content': None,
      'query': '%23Hay%C4%B1rl%C4%B1Cumalar',
      'tweet_volume': 19848
  }, {
      'name': '#HayırlıKandiller',
      'url': 'http://twitter.com/search?q=%23Hay%C4%B1rl%C4%B1Kandiller',
      'promoted_content': None,
      'query': '%23Hay%C4%B1rl%C4%B1Kandiller',
      'tweet_volume': None
  }, {
      'name': '#HanumanJayanti',
      'url': 'http://twitter.com/search?q=%23HanumanJayanti',
      'promoted_content': None,
      'query': '%23HanumanJayanti',
      'tweet_volume': 83138
  }, {
      'name': '#IndonesianElectionHeroes',
      'url': 'http://twitter.com/search?q=%23IndonesianElectionHeroes',
      'promoted_content': None,
      'query': '%23IndonesianElectionHeroes',
      'tweet_volume': 19664
  }, {
      'name': '#يوم_الجمعه',
      'url': 'http://twitter.com/search?q=%23%D9%8A%D9%88%D9%85_%D8%A7%D9%84%D8%AC%D9%85%D8%B9%D9%87',
      'promoted_content': None,
      'query': '%23%D9%8A%D9%88%D9%85_%D8%A7%D9%84%D8%AC%D9%85%D8%B9%D9%87',
      'tweet_volume': 80799
  }, {
      'name': '#NRLBulldogsSouths',
      'url': 'http://twitter.com/search?q=%23NRLBulldogsSouths',
      'promoted_content': None,
      'query': '%23NRLBulldogsSouths',
      'tweet_volume': None
  }, {
      'name': '#NikahUmurBerapa',
      'url': 'http://twitter.com/search?q=%23NikahUmurBerapa',
      'promoted_content': None,
      'query': '%23NikahUmurBerapa',
      'tweet_volume': None
  }, {
      'name': '#DragRace',
      'url': 'http://twitter.com/search?q=%23DragRace',
      'promoted_content': None,
      'query': '%23DragRace',
      'tweet_volume': 37166
  }, {
      'name': '#ViernesSanto',
      'url': 'http://twitter.com/search?q=%23ViernesSanto',
      'promoted_content': None,
      'query': '%23ViernesSanto',
      'tweet_volume': None
  }, {
      'name': '#HardikPatel',
      'url': 'http://twitter.com/search?q=%23HardikPatel',
      'promoted_content': None,
      'query': '%23HardikPatel',
      'tweet_volume': None
  }, {
      'name': '#BLACKPINKxCorden',
      'url': 'http://twitter.com/search?q=%23BLACKPINKxCorden',
      'promoted_content': None,
      'query': '%23BLACKPINKxCorden',
      'tweet_volume': 253605
  }, {
      'name': '#Ontas',
      'url': 'http://twitter.com/search?q=%23Ontas',
      'promoted_content': None,
      'query': '%23Ontas',
      'tweet_volume': 27924
  }, {
      'name': '#ConCalmaRemix',
      'url': 'http://twitter.com/search?q=%23ConCalmaRemix',
      'promoted_content': None,
      'query': '%23ConCalmaRemix',
      'tweet_volume': 37846
  }, {
      'name': '#ProtestoEdiyorum',
      'url': 'http://twitter.com/search?q=%23ProtestoEdiyorum',
      'promoted_content': None,
      'query': '%23ProtestoEdiyorum',
      'tweet_volume': None
  }, {
      'name': '#DinahJane1',
      'url': 'http://twitter.com/search?q=%23DinahJane1',
      'promoted_content': None,
      'query': '%23DinahJane1',
      'tweet_volume': 23757
  }, {
      'name': '#ShivSena',
      'url': 'http://twitter.com/search?q=%23ShivSena',
      'promoted_content': None,
      'query': '%23ShivSena',
      'tweet_volume': None
  }, {
      'name': '#DuyguAsena',
      'url': 'http://twitter.com/search?q=%23DuyguAsena',
      'promoted_content': None,
      'query': '%23DuyguAsena',
      'tweet_volume': None
  }, {
      'name': '#TheJudasInMyLife',
      'url': 'http://twitter.com/search?q=%23TheJudasInMyLife',
      'promoted_content': None,
      'query': '%23TheJudasInMyLife',
      'tweet_volume': None
  }, {
      'name': '#Jersey',
      'url': 'http://twitter.com/search?q=%23Jersey',
      'promoted_content': None,
      'query': '%23Jersey',
      'tweet_volume': 20509
  }, {
      'name': '#اغلاق_BBM',
      'url': 'http://twitter.com/search?q=%23%D8%A7%D8%BA%D9%84%D8%A7%D9%82_BBM',
      'promoted_content': None,
      'query': '%23%D8%A7%D8%BA%D9%84%D8%A7%D9%82_BBM',
      'tweet_volume': 17055
  }, {
      'name': '#19aprile',
      'url': 'http://twitter.com/search?q=%2319aprile',
      'promoted_content': None,
      'query': '%2319aprile',
      'tweet_volume': None
  }, {
      'name': '#CHIvLIO',
      'url': 'http://twitter.com/search?q=%23CHIvLIO',
      'promoted_content': None,
      'query': '%23CHIvLIO',
      'tweet_volume': None
  }, {
      'name': '#Karfreitag',
      'url': 'http://twitter.com/search?q=%23Karfreitag',
      'promoted_content': None,
      'query': '%23Karfreitag',
      'tweet_volume': None
  }, {
      'name': '#JunquerasACN',
      'url': 'http://twitter.com/search?q=%23JunquerasACN',
      'promoted_content': None,
      'query': '%23JunquerasACN',
      'tweet_volume': None
  }],
  'as_of': '2019-04-19T08:43:43Z',
  'created_at': '2019-04-19T08:39:15Z',
  'locations': [{
      'name': 'Worldwide',
      'woeid': 1
  }]
}]
[{
  'trends': [{
      'name': '#WeLoveTheEarth',
      'url': 'http://twitter.com/search?q=%23WeLoveTheEarth',
      'promoted_content': None,
      'query': '%23WeLoveTheEarth',
      'tweet_volume': 159698
  }, {
      'name': '#DragRace',
      'url': 'http://twitter.com/search?q=%23DragRace',
      'promoted_content': None,
      'query': '%23DragRace',
      'tweet_volume': 37166
  }, {
      'name': 'Lil Dicky',
      'url': 'http://twitter.com/search?q=%22Lil+Dicky%22',
      'promoted_content': None,
      'query': '%22Lil+Dicky%22',
      'tweet_volume': 42461
  }, {
      'name': 'Derrick White',
      'url': 'http://twitter.com/search?q=%22Derrick+White%22',
      'promoted_content': None,
      'query': '%22Derrick+White%22',
      'tweet_volume': 27104
  }, {
      'name': '#CUZILOVEYOU',
      'url': 'http://twitter.com/search?q=%23CUZILOVEYOU',
      'promoted_content': None,
      'query': '%23CUZILOVEYOU',
      'tweet_volume': None
  }, {
      'name': 'Kevin Durant',
      'url': 'http://twitter.com/search?q=%22Kevin+Durant%22',
      'promoted_content': None,
      'query': '%22Kevin+Durant%22',
      'tweet_volume': 21870
  }, {
      'name': '#StarTrekDiscovery',
      'url': 'http://twitter.com/search?q=%23StarTrekDiscovery',
      'promoted_content': None,
      'query': '%23StarTrekDiscovery',
      'tweet_volume': None
  }, {
      'name': '#GSWvsLAC',
      'url': 'http://twitter.com/search?q=%23GSWvsLAC',
      'promoted_content': None,
      'query': '%23GSWvsLAC',
      'tweet_volume': None
  }, {
      'name': 'Oshie',
      'url': 'http://twitter.com/search?q=Oshie',
      'promoted_content': None,
      'query': 'Oshie',
      'tweet_volume': None
  }, {
      'name': 'Seth Abramson',
      'url': 'http://twitter.com/search?q=%22Seth+Abramson%22',
      'promoted_content': None,
      'query': '%22Seth+Abramson%22',
      'tweet_volume': None
  }, {
      'name': 'Lyra McKee',
      'url': 'http://twitter.com/search?q=%22Lyra+McKee%22',
      'promoted_content': None,
      'query': '%22Lyra+McKee%22',
      'tweet_volume': 17606
  }, {
      'name': 'Silky',
      'url': 'http://twitter.com/search?q=Silky',
      'promoted_content': None,
      'query': 'Silky',
      'tweet_volume': 12881
  }, {
      'name': 'Kazuo Koike',
      'url': 'http://twitter.com/search?q=%22Kazuo+Koike%22',
      'promoted_content': None,
      'query': '%22Kazuo+Koike%22',
      'tweet_volume': None
  }, {
      'name': 'Game 6',
      'url': 'http://twitter.com/search?q=%22Game+6%22',
      'promoted_content': None,
      'query': '%22Game+6%22',
      'tweet_volume': None
  }, {
      'name': 'Yvie',
      'url': 'http://twitter.com/search?q=Yvie',
      'promoted_content': None,
      'query': 'Yvie',
      'tweet_volume': 10680
  }, {
      'name': 'Gallant',
      'url': 'http://twitter.com/search?q=Gallant',
      'promoted_content': None,
      'query': 'Gallant',
      'tweet_volume': None
  }, {
      'name': 'Lone Wolf and Cub',
      'url': 'http://twitter.com/search?q=%22Lone+Wolf+and+Cub%22',
      'promoted_content': None,
      'query': '%22Lone+Wolf+and+Cub%22',
      'tweet_volume': None
  }, {
      'name': 'George Conway',
      'url': 'http://twitter.com/search?q=%22George+Conway%22',
      'promoted_content': None,
      'query': '%22George+Conway%22',
      'tweet_volume': 27458
  }, {
      'name': 'David Fletcher',
      'url': 'http://twitter.com/search?q=%22David+Fletcher%22',
      'promoted_content': None,
      'query': '%22David+Fletcher%22',
      'tweet_volume': None
  }, {
      'name': 'Derry',
      'url': 'http://twitter.com/search?q=Derry',
      'promoted_content': None,
      'query': 'Derry',
      'tweet_volume': 28234
  }, {
      'name': 'Mike Anderson',
      'url': 'http://twitter.com/search?q=%22Mike+Anderson%22',
      'promoted_content': None,
      'query': '%22Mike+Anderson%22',
      'tweet_volume': None
  }, {
      'name': 'Shy Glizzy',
      'url': 'http://twitter.com/search?q=%22Shy+Glizzy%22',
      'promoted_content': None,
      'query': '%22Shy+Glizzy%22',
      'tweet_volume': None
  }, {
      'name': 'Tomas Hertl',
      'url': 'http://twitter.com/search?q=%22Tomas+Hertl%22',
      'promoted_content': None,
      'query': '%22Tomas+Hertl%22',
      'tweet_volume': None
  }, {
      'name': 'Servais',
      'url': 'http://twitter.com/search?q=Servais',
      'promoted_content': None,
      'query': 'Servais',
      'tweet_volume': None
  }, {
      'name': 'WE LOVE THE EARTH',
      'url': 'http://twitter.com/search?q=%22WE+LOVE+THE+EARTH%22',
      'promoted_content': None,
      'query': '%22WE+LOVE+THE+EARTH%22',
      'tweet_volume': None
  }, {
      'name': '"Earth"',
      'url': 'http://twitter.com/search?q=%22Earth%22',
      'promoted_content': None,
      'query': '%22Earth%22',
      'tweet_volume': 338417
  }, {
      'name': '#DinahJane1',
      'url': 'http://twitter.com/search?q=%23DinahJane1',
      'promoted_content': None,
      'query': '%23DinahJane1',
      'tweet_volume': 23757
  }, {
      'name': '#WhatStopsYouFromGoingHome',
      'url': 'http://twitter.com/search?q=%23WhatStopsYouFromGoingHome',
      'promoted_content': None,
      'query': '%23WhatStopsYouFromGoingHome',
      'tweet_volume': None
  }, {
      'name': '#MakeAMovieSensual',
      'url': 'http://twitter.com/search?q=%23MakeAMovieSensual',
      'promoted_content': None,
      'query': '%23MakeAMovieSensual',
      'tweet_volume': None
  }, {
      'name': '#DontChangeOutNow',
      'url': 'http://twitter.com/search?q=%23DontChangeOutNow',
      'promoted_content': None,
      'query': '%23DontChangeOutNow',
      'tweet_volume': None
  }, {
      'name': '#BLACKPINKxCorden',
      'url': 'http://twitter.com/search?q=%23BLACKPINKxCorden',
      'promoted_content': None,
      'query': '%23BLACKPINKxCorden',
      'tweet_volume': 253605
  }, {
      'name': '#WorldofWarcraftMains',
      'url': 'http://twitter.com/search?q=%23WorldofWarcraftMains',
      'promoted_content': None,
      'query': '%23WorldofWarcraftMains',
      'tweet_volume': None
  }, {
      'name': '#MyDrunkUncleSays',
      'url': 'http://twitter.com/search?q=%23MyDrunkUncleSays',
      'promoted_content': None,
      'query': '%23MyDrunkUncleSays',
      'tweet_volume': None
  }, {
      'name': '#WGAMIX',
      'url': 'http://twitter.com/search?q=%23WGAMIX',
      'promoted_content': None,
      'query': '%23WGAMIX',
      'tweet_volume': None
  }, {
      'name': '#Earth',
      'url': 'http://twitter.com/search?q=%23Earth',
      'promoted_content': None,
      'query': '%23Earth',
      'tweet_volume': 13655
  }, {
      'name': '#TheLegendOfVoxMachina',
      'url': 'http://twitter.com/search?q=%23TheLegendOfVoxMachina',
      'promoted_content': None,
      'query': '%23TheLegendOfVoxMachina',
      'tweet_volume': None
  }, {
      'name': '#AFLNorthDons',
      'url': 'http://twitter.com/search?q=%23AFLNorthDons',
      'promoted_content': None,
      'query': '%23AFLNorthDons',
      'tweet_volume': None
  }, {
      'name': '#FridayFeeling',
      'url': 'http://twitter.com/search?q=%23FridayFeeling',
      'promoted_content': None,
      'query': '%23FridayFeeling',
      'tweet_volume': 19510
  }, {
      'name': '#MyInnerDemonSaid',
      'url': 'http://twitter.com/search?q=%23MyInnerDemonSaid',
      'promoted_content': None,
      'query': '%23MyInnerDemonSaid',
      'tweet_volume': None
  }, {
      'name': '#rupaulsdragrace',
      'url': 'http://twitter.com/search?q=%23rupaulsdragrace',
      'promoted_content': None,
      'query': '%23rupaulsdragrace',
      'tweet_volume': None
  }, {
      'name': '#ConCalmaRemix',
      'url': 'http://twitter.com/search?q=%23ConCalmaRemix',
      'promoted_content': None,
      'query': '%23ConCalmaRemix',
      'tweet_volume': 37846
  }, {
      'name': '#TimeToImpeach',
      'url': 'http://twitter.com/search?q=%23TimeToImpeach',
      'promoted_content': None,
      'query': '%23TimeToImpeach',
      'tweet_volume': 21732
  }, {
      'name': '#NRLBulldogsSouths',
      'url': 'http://twitter.com/search?q=%23NRLBulldogsSouths',
      'promoted_content': None,
      'query': '%23NRLBulldogsSouths',
      'tweet_volume': None
  }, {
      'name': '#CriticalRoleSpoilers',
      'url': 'http://twitter.com/search?q=%23CriticalRoleSpoilers',
      'promoted_content': None,
      'query': '%23CriticalRoleSpoilers',
      'tweet_volume': None
  }, {
      'name': '#GossipShouldBe',
      'url': 'http://twitter.com/search?q=%23GossipShouldBe',
      'promoted_content': None,
      'query': '%23GossipShouldBe',
      'tweet_volume': None
  }, {
      'name': '#LilDicky',
      'url': 'http://twitter.com/search?q=%23LilDicky',
      'promoted_content': None,
      'query': '%23LilDicky',
      'tweet_volume': None
  }, {
      'name': '#RPDR',
      'url': 'http://twitter.com/search?q=%23RPDR',
      'promoted_content': None,
      'query': '%23RPDR',
      'tweet_volume': None
  }, {
      'name': '#WeirdDateStories',
      'url': 'http://twitter.com/search?q=%23WeirdDateStories',
      'promoted_content': None,
      'query': '%23WeirdDateStories',
      'tweet_volume': None
  }, {
      'name': '#HustleAndSoul',
      'url': 'http://twitter.com/search?q=%23HustleAndSoul',
      'promoted_content': None,
      'query': '%23HustleAndSoul',
      'tweet_volume': None
  }, {
      'name': '#fridaymotivation',
      'url': 'http://twitter.com/search?q=%23fridaymotivation',
      'promoted_content': None,
      'query': '%23fridaymotivation',
      'tweet_volume': None
  }],
  'as_of': '2019-04-19T08:43:43Z',
  'created_at': '2019-04-19T08:39:15Z',
  'locations': [{
      'name': 'United States',
      'woeid': 23424977
  }]
}]

@brunolnetto

brunolnetto commented Dec 20, 2022

Copy link
Copy Markdown

@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

hsambhi18 commented Jan 13, 2023

Copy link
Copy Markdown

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

@Aviva0304

Aviva0304 commented Mar 12, 2023

Copy link
Copy Markdown

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

ne-sharma commented Mar 17, 2023 •
edited
Loading

Copy link
Copy Markdown
is it really working!

Markdown for collapsible content goes here.

@Aviva0304

Aviva0304 commented Mar 28, 2023

Copy link
Copy Markdown

is it really working!

thanks a lot , I will try again!

@NitkarshChourasia

NitkarshChourasia commented Mar 29, 2023

Copy link
Copy Markdown
Click me, babe.
Click me, again, babe.

Nested 'click me' works, wonderfully. See!

Details Click me, again, Babe 2.

Just testing multiple, hidden stuffs.

Hello, There.

How are you, guys?

@KosiOju

KosiOju commented Apr 2, 2023

Copy link
Copy Markdown

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

TheBoxyBear commented Apr 17, 2023

Copy link
Copy Markdown

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

@BrendaMoxley

BrendaMoxley commented Apr 17, 2023 •
edited
Loading

Copy link
Copy Markdown

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

osalbahr commented Apr 30, 2023

Copy link
Copy Markdown

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

TheBoxyBear commented Apr 30, 2023

Copy link
Copy Markdown

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

FeiYing9 commented May 17, 2023 •
edited
Loading

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

@dimaslanjaka

dimaslanjaka commented May 23, 2023

Copy link
Copy Markdown
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

dimaslanjaka commented May 23, 2023

Copy link
Copy Markdown
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

lidgnulinux commented Jun 16, 2023

Copy link
Copy Markdown

Thanks.

@emvhaccuranker

emvhaccuranker commented Jun 29, 2023 •
edited
Loading

Copy link
Copy Markdown
Click me

Test

hello

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