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!
@auwsom
Copy link

auwsom commented Sep 29, 2022

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

auwsom commented Sep 29, 2022

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

Realank commented Oct 14, 2022


  • Item1
  • Item2
  • Item3

@samuelgfeller
Copy link

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

auwsom commented Oct 27, 2022

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

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

@Treevuhh looks like they fixed it!

fantastic, it worked! thx ;)

@ranggakd
Copy link

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

@jisungbin
Copy link

Thanks!

@StefanHeng
Copy link

StefanHeng commented Dec 13, 2022

Trying unordered list

click
  • item 1
  • item 2
  • item 3

@cosminsandu
Copy link

cosminsandu commented Dec 13, 2022

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

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

@brunolnetto
Copy link

brunolnetto commented Dec 17, 2022

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

@sxddhxrthx
Copy link

sxddhxrthx commented Dec 20, 2022

Hello ### This is a dummy text

@KishanMistri
Copy link

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

@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

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