Skip to content

Instantly share code, notes, and snippets.

@pierrejoubert73
Last active May 27, 2024 22:20
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

@ELowry
Copy link

ELowry commented Jul 1, 2023

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

This is an h2 title

And it is collapsible!

Here's how it works:

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

@bigmasonwang
Copy link

Title

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

@illegitimate-egg
Copy link

Can you nest them?
Can you nest them?

@joaoantoniocardoso
Copy link

joaoantoniocardoso commented Aug 4, 2023

And it can also be used to collapse quotations

:)

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

@fightling
Copy link

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

@MelSumner
Copy link

MelSumner commented Aug 8, 2023

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

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

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

@ZhengYuan-Public
Copy link

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

@pierrejoubert73
Copy link
Author

pierrejoubert73 commented Aug 17, 2023

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

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

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

Sorry for being such a bad dad to this thread.

@brunolnetto
Copy link

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

@sbmali
Copy link

sbmali commented Sep 30, 2023

Click me

Heading

  1. Foo
  2. Bar
    • Baz
    • Qux

Some JavaScript

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

@NitkarshChourasia
Copy link

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

@florian-guily
Copy link

i test stuff

@MarcosYonamine963
Copy link

Nested details:

Code:

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

You're welcome

@Sterh20
Copy link

Sterh20 commented Dec 12, 2023

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

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

@brunolnetto
Copy link

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

@Sterh20
Copy link

Sterh20 commented Dec 12, 2023

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

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

Click me
Header 1 Header 2
Row 1 Row 1
Row 2 Row 2
<details>

  <summary>Click me</summary>

  | Header 1 | Header 2 |
  | -------- | -------- |
  | Row 1    | Row 1    |
  | Row 2    | Row 2    |
  
</details>

@brunolnetto
Copy link

Marvelous! 🥂

@jonchen727
Copy link

Block quotes don't work

[!NOTE]
Not working :(

Note

It works here

<details>

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

> [!NOTE]
> Not working :(

</details>

@cloudbring
Copy link

A few issues:

  1. Nesting only goes 4 levels deep
  2. HTML code in a nested details tag messes up the accordion

Invalid Code Example

  • Trying to write an example here also breaks everything
<details>
<summary><h1>H1</h1></summary>

> :warning: Issue: Doesn't show header underline


```markdown
<details>
<summary>First Level</summary>
## Fun Content

<details>
<summary>2nd Level with a Code Block of a Details Tag</summary>

```markdown
<details>
<summary>Details Tag inside an embedded markdown code block</summary>
## Embedded Fun Content
</details>
``` ```

H1

⚠️ Issue: Doesn't show header underline

Code

<details>

<summary><h1>H1</h1></summary>

# H1 Inside

## H2

### H3

#### H4

##### H5
</details>

H1 Inside

H2

H3

H4

H5

H2

⚠️ Issue: Doesn't show header underline

H1 Inside

H2

H3

H4

H5

H3

H1 Inside

H2

H3

H4

H5

Embedded Headers

H1 Embedded with Nested Details with Headers

⚠️ Nesting only goes 4 levels deep

  • H5 doesn't show content even though markdown goes 5 levels deep

H1

H2

H3

H4

H5
A Sixth Level for Fun and Breakage

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H1 Inside

H2

H3

H4

H5

H3

H4

H5

@ngouy
Copy link

ngouy commented Jan 15, 2024

You're welcome

There is kinda no point. It's not markdown anymore, it's "just" pure - yet valid - HTML

Here is something I came up with that works. An indented list with collapsable sections.
Each section can have it's own re-indented, list, with collapsable items, + regular MD content

The tricky part is how GH-flavored-md react to spaces and such. You have to indent your whole section in a specific way, and your closing </details> tag must be indented as if it was part of the body

For it to work, I suggest you keep the spaces and newlines intact

  • Section 1 with a link
    • subsection 2 with a link
      • a list
      • with some stuff

      and other things

      • like
      • a task list
    • another subsection

      a. with another list
      b. and some other stuff
      d. and,
      more,
      classic,
      md
      e. no need of html

    • last sub-section

      blablabla

      def some_code
        puts "Rails is so cool"
      end
    • a random not collapsable section

      legacy. Should be restructured.

      console.log("look what I found, a new js framework. Still nothing even close to being as efficient as rails though...")
    • and another collapsable section

      ...

  • section 2

    some parent content

    and another list

    • section 2.1

      and some content

    • section 2.2

      and some content

    • section 2.3
      and some no collapsed content

the code:

- <details open>
  <summary><a href="#">Section 1 with a link</a></summary>

  - <details>
    <summary><a href="../src/actions/">subsection 2 with a link</a></summary>

    - a list
    - with some stuff

    > and other things

    - [x] like
    - [ ] a task list 

    </details>

  - <details>
    <summary><b>another subsection</a></summary>

    a. with another list
    b. and some other stuff
    d. [and](),
      [more](),
      [classic](),
      [md]
    e. _no need_ __of html__
    </details>

  - <details>
    <summary>last sub-section</a></summary>

    blablabla

    ```rb
    def some_code
      puts "Rails is so cool"
    end
    ```
    </details>

  - a random not collapsable section
    > legacy. Should be restructured.

    ```js
    console.log("look what I found, a new js framework. Still no real alternative to rails though")
    ```

  - <details>
    <summary>and another collapsable section</summary>

    ...
  </details>

- <details>
  <summary>section 2</summary>
      
  some parent content

  and another list

  - <details>
    <summary>section 2.1</summary>

      and some content
    </details>

  - <details>
    <summary>section 2.2</summary>

      and some content
    </details>
  
  - section 2.3
    and some no collapsed content

</details>

@Snailedlt
Copy link

Block quotes don't work
Note

It works here

<details>

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

> [!NOTE]
> Not working :(

</details>

Seems like a problem with all alerts inside of divs. I made a comment on the thread that introduced alerts here: https://github.com/orgs/community/discussions/16925#discussioncomment-8383959

@TidbitSoftware
Copy link

TidbitSoftware commented Feb 20, 2024

@fightling Not without JavaScript.

@MelSumner This is a really important point. I think that a lot of us will probably shrug and go ahead anyway as we "need" accordion in Markdown (unfortunately). I read the first article you linked. What do you think the fix here might be? Is it up to the screen-reading software to handle the case of details being used in this way? Should accessibility be incorporated into the HTML standard? Edit: it looks like one way around this would be to precede the details section with a Markdown heading,

# Heading
<details>
  <summary>Read More</summary>
  Content
</details>

@MelSumner
Copy link

@TidbitSoftware it would be something like

<details>
  <summary>Read more about penguins</summary>
  <div class="content">
    <p>Interesting paragraph text about penguins</p>
    <p>Another interesting bit of paragraph text about penguins</p>
  </div>
 </details>

@moshiurse
Copy link

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>

Its not working!!

@pierrejoubert73
Copy link
Author

pierrejoubert73 commented Mar 5, 2024

This is an h2 title

Content goes here.

@moshiurse You put the <h2> tags in the wrong place. They go inside <summary>, not outside.

This is an h2 title

Content goes here.

@moshiurse
Copy link

<details>
<summary><h5>See Here</h5></summary>

image

But it is going down. Can you help me to fix?

@pierrejoubert73
Copy link
Author

@moshiurse You mean the new line after the caret?

@moshiurse
Copy link

@moshiurse You mean the new line after the caret?

Yes it is added as a next line

@pierrejoubert73
Copy link
Author

@moshiurse, Could you paste your markdown here and see how it renders? If the behaviour is reproducible, we can debug it. If the behaviour is normal, then the problem is in your environment.

@ProphecyOak
Copy link

counterSorter.py

For a given file, either counts or sorts it and places the output in CounterSorterOutput by default.

  • If you are sorting, include an s or the word sort after the specified file.
  • If you are counting, include a c or the word count after the specified file.

For either option, you may:

  • Specify a designated output file using the -d or --dest flag.
  • Specify a sorting function using the -m or --method flag and a key from the SORT_FUNCTIONS dictionary in properties.py.
  • Invert the sort direction using the -r or --reverse flag.
  • Ignore the header of the file using the -s or --skip flag and a number of lines to skip.

For whatever reason, this works in the chat here but not in the readme for my repo.

<details><summary><h3>counterSorter.py</h3></summary>
 >For a given file, either counts or sorts it and places the output in `CounterSorterOutput` by default.
 >- If you are sorting, include an `s` or the word `sort` after the specified file.
 >- If you are counting, include a `c` or the word `count` after the specified file.
 >
 >For either option, you may:
 >- Specify a designated output file using the `-d` or `--dest` flag.
 >- Specify a sorting function using the `-m` or `--method` flag and a key from the `SORT_FUNCTIONS` dictionary in `properties.py`.
 >- Invert the sort direction using the `-r` or `--reverse` flag.
 >- Ignore the header of the file using the `-s` or `--skip` flag and a number of lines to skip.
</details>

This is the result in my repo:

image

Any idea why this might be happening?

@pierrejoubert73
Copy link
Author

@ProphecyOak I headed over to some online markdown editors and tested it there. None of them rendered the collapsible section.
They cannot interpret the elements like GitHub does (It is HTML, after all). I believe that whatever is rendering your markdown will look at those elements, see that they are HTML, and interpret them as best they can. Can you inspect those elements?

@moshiurse
Copy link

moshiurse commented Mar 6, 2024

@moshiurse, Could you paste your markdown here and see how it renders? If the behaviour is reproducible, we can debug it. If the behaviour is normal, then the problem is in your environment.

See Here

Sometimes with a root user, things might not work properly. So creating a new user with sudo permission is a better option.
<details>
<summary><h2>See Here</h2></summary>
  Sometimes with a root user, things might not work properly. So creating a new user with sudo permission is a better option.
</details>

Looks like it working in this comment but in my repo it is not working!!
For directly check the md file you can check this: https://github.com/moshiurse/moshiurse/blob/main/Cloud-Server-Setup.md

@pierrejoubert73
Copy link
Author

pierrejoubert73 commented Mar 6, 2024

@moshiurse Interesting. It looks fine to me. Perhaps it is browser-related. Which browser/version are you running?
Edit: Sorry, I just realized you said it looks fine here. But the fact that it still looks ok to me on your md but not for you is quite odd. Do you think it could be a responsive issue?
image

@moshiurse
Copy link

@moshiurse Interesting. It looks fine to me. Perhaps it is browser-related. Which browser/version are you running? Edit: Sorry, I just realized you said it looks fine here. But the fact that it still looks ok to me on your md but not for you is quite odd. Do you think it could be a responsive issue? image

I don't use h2 tag here
When i am using it looks like this
image
Now I update the md file you can see. https://github.com/moshiurse/moshiurse/blob/main/Cloud-Server-Setup.md

@thc282
Copy link

thc282 commented Mar 6, 2024

@moshiurse
about the tag problem
i have tried, if the h2 outside the details is fine. it won't have any new line in the summary. However all the content inside the details will becomes h2

And i think this just the github issue. In long ago, i have tried the same trick in my repo. It work well and dont have any newline, now that repo summary text just move to next line

@beatrizsmerino
Copy link

Hi @moshiurse!

I have the same problem, although it didn't happen a few days ago.

Here you can see something about:

I tried everything and in the end I had to use svg images.
In short, the problem is that a few days ago Github didn't treat h1 etc. as block elements, so the arrow and the title were seen side by side.

@DolevArtzi
Copy link

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

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

Click me

<details>

  <summary>Click me</summary>

  | Header 1 | Header 2 |
  | -------- | -------- |
  | Row 1    | Row 1    |
  | Row 2    | Row 2    |
  
</details>

Wanted to add that this also works for LaTeX, including double $$ blocks. see example:


Rendered Output:

Proof of variance of geometric

Reveal Proof To compute the variance of $X$, where $X \sim \text{Geom}(p)$, we'll start by finding the second moment. $$E[X^2] = E[X^2 \mid A]P[A] + E[X^2 \mid A^c]P[A^c]$$

Code:

 <details><summary>Reveal Proof</summary>
 To compute the variance of $X$, where $X \sim \text{Geom}(p)$, we'll start by finding the second moment. 
 $$E[X^2] = E[X^2 \mid A]P[A] + E[X^2 \mid A^c]P[A^c]$$
</details>```

@jhj0517
Copy link

jhj0517 commented Apr 5, 2024

Hi! I want to test if I can embed image inside detail.

demo Content1

Content2

ForegroundService

It works! very thanks.

@brendanmaguire
Copy link

Click The rest

@KelvinKaungDev
Copy link

@lebathang
Copy link

test Hello everyone here

code:

 <details>
 <summary>test</summary>
 <b>Hello everyone here<b>
 </details>

@vinser
Copy link

vinser commented Apr 29, 2024

Using this code in my project README.md on GitHub

### Setup and fine tuning
<details>
<summary><i><h4>1. Main configuration file</h4></i></summary>
For advanced sutup you can edit `config/config.yml` selfexplanatory configuration file.  
This file by default is located in `config` subfolder of program file location.
</details>

I get what it should be:

Setup and fine tuning

1. Main configuration file

For advanced sutup you can edit `config/config.yml` selfexplanatory configuration file. This file by default is located in `config` subfolder of program file location.

But when I use the same code on GitHub Pages with classic minima skin I get line break between marker and summary tip the same as moshiurse wrote above.
image

Are any thoughts how to fix this?

@mayank7j-shell
Copy link

Testing if really need to add indentation. Turns out, not really.

Click me
Header 1 Header 2
Row 1 Row 1
Row 2 Row 2

Code:

<details>

<summary>Click me</summary>

| Header 1 | Header 2 |
| -------- | -------- |
| Row 1    | Row 1    |
| Row 2    | Row 2    |
  
</details>

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