pierrejoubert73/markdown-details-collapsible.md

Last active November 15, 2024 16:21

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab.js"></script>
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

Foo
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!

jisungbin commented Nov 29, 2022

Thanks!

StefanHeng commented Dec 13, 2022 •

edited

Loading

Trying unordered list

click

item 1
item 2
item 3

cosminsandu commented Dec 13, 2022 •

edited

Loading

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

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

PHP and Web Security - same content as in summary

brunolnetto commented Dec 17, 2022 •

edited

Loading

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

sxddhxrthx commented Dec 20, 2022 •

edited

Loading

Hello

### This is a dummy text

KishanMistri commented Dec 20, 2022

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 commented Dec 20, 2022

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

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

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

hsambhi18 commented Jan 13, 2023

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

Aviva0304 commented Mar 12, 2023

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 commented Mar 17, 2023 •

edited

Loading

is it really working!

Markdown for collapsible content goes here.

Aviva0304 commented Mar 28, 2023

is it really working!

thanks a lot , I will try again!

NitkarshChourasia commented Mar 29, 2023

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 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?

thank you!

TheBoxyBear commented Apr 17, 2023

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

BrendaMoxley commented Apr 17, 2023 •

edited

Loading

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 commented Apr 30, 2023

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 commented Apr 30, 2023

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 commented May 17, 2023 •

edited

Loading

is `json` ok?

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

func main(){
}

{
"hello": "world"
}

dimaslanjaka commented May 23, 2023

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 commented May 23, 2023

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 commented Jun 16, 2023

Thanks.

emvhaccuranker commented Jun 29, 2023 •

edited

Loading

Click me

Test

hello

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 commented Jul 4, 2023

Title

content

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

illegitimate-egg commented Jul 9, 2023

Can you nest them?

joaoantoniocardoso commented Aug 4, 2023 •

edited

Loading

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 commented Aug 7, 2023

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

MelSumner commented Aug 8, 2023 •

edited

Loading

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 commented Aug 10, 2023

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

Author

pierrejoubert73 commented Aug 17, 2023 •

edited

Loading

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.

pierrejoubert73/markdown-details-collapsible.md

How to add a collapsible section in markdown

1. Example

Heading

Some Javascript

2. Code/Markdown

3. Tips & Tricks

3.1 Expand by Default

3.2 Customize Clickable Text

3.3 Nested Collapsible Sections

Troubleshooting

jisungbin commented Nov 29, 2022

StefanHeng commented Dec 13, 2022 • edited Loading

cosminsandu commented Dec 13, 2022 • edited Loading

brunolnetto commented Dec 17, 2022 • edited Loading

sxddhxrthx commented Dec 20, 2022 • edited Loading

KishanMistri commented Dec 20, 2022

Code Outputs which is not follow a specific format

brunolnetto commented Dec 20, 2022

hsambhi18 commented Jan 13, 2023

Aviva0304 commented Mar 12, 2023

ne-sharma commented Mar 17, 2023 • edited Loading

Aviva0304 commented Mar 28, 2023

NitkarshChourasia commented Mar 29, 2023

Nested 'click me' works, wonderfully. See!

Just testing multiple, hidden stuffs.

Hello, There.

How are you, guys?

KosiOju commented Apr 2, 2023

TheBoxyBear commented Apr 17, 2023

BrendaMoxley commented Apr 17, 2023 • edited Loading

osalbahr commented Apr 30, 2023

TheBoxyBear commented Apr 30, 2023

FeiYing9 commented May 17, 2023 • edited Loading

dimaslanjaka commented May 23, 2023

dimaslanjaka commented May 23, 2023

lidgnulinux commented Jun 16, 2023

emvhaccuranker commented Jun 29, 2023 • edited Loading

Test

ELowry commented Jul 1, 2023

This is an h2 title

bigmasonwang commented Jul 4, 2023

Title

illegitimate-egg commented Jul 9, 2023

joaoantoniocardoso commented Aug 4, 2023 • edited Loading

:)

fightling commented Aug 7, 2023

MelSumner commented Aug 8, 2023 • edited Loading

ZhengYuan-Public commented Aug 10, 2023

pierrejoubert73 commented Aug 17, 2023 • edited Loading

StefanHeng commented Dec 13, 2022 •

edited

Loading

cosminsandu commented Dec 13, 2022 •

edited

Loading

brunolnetto commented Dec 17, 2022 •

edited

Loading

sxddhxrthx commented Dec 20, 2022 •

edited

Loading

ne-sharma commented Mar 17, 2023 •

edited

Loading

BrendaMoxley commented Apr 17, 2023 •

edited

Loading

FeiYing9 commented May 17, 2023 •

edited

Loading

emvhaccuranker commented Jun 29, 2023 •

edited

Loading

joaoantoniocardoso commented Aug 4, 2023 •

edited

Loading

MelSumner commented Aug 8, 2023 •

edited

Loading

pierrejoubert73 commented Aug 17, 2023 •

edited

Loading