collapsible markdown

README.md

collapsible markdown?

CLICK ME

yes, even hidden code blocks!

print("hello world!")

Can somebody told me, how to hide under sploier this

• Detail 1

  • Detail 1.1
  • Detail 1.2

• Detail 2

  • Detail 2.1
    ?

You can nest it
Below is what you are looking for ?

• Detail 1

  • Detail 1.1
  • Detail 1.2
• Detail 2

  • Detail 2.1
  • Detail 2.2

This is how the above is made

- <details><summary>Detail 1</summary>

     - Detail 1.1
     - Detail 1.2

- <details><summary>Detail 2</summary>

     - Detail 2.1
     - Detail 2.2

</details>
</details>

CLICK ME
This collapsible block is open by default

Can you show the markdown code for this?

God bless you =) it is just awesome!

This is crystal clear - awesome stuff. Thank you!

Android Node Tree

<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>

<details>
<summary><mark><font color=darkred>Android Node Tree</font></mark>
</summary>
<p>

#```xml

 <?xml version='1.0' encoding='UTF-8' standalone='yes' ?>

#```

</p>
</details>

remove # before code block

How can I have a details view expanded as default ?

How can I have a details view expanded as default ?

@Dji75 in case you still need this info, it is:

<details open>

Some serious magic going on here. Really helps tame long pastes.

And how? Where is my images?

CrystalDiskInfo


CrystalDiskMark C


C:\ CDM_20211119122746

------------------------------------------------------------------------------ CrystalDiskMark 7.0.0 x64 (C) 2007-2019 hiyohiyo Crystal Dew World: https://crystalmark.info/ ------------------------------------------------------------------------------ * MB/s = 1,000,000 bytes/s [SATA/600 = 600,000,000 bytes/s] * KB = 1000 bytes, KiB = 1024 bytes

[Read]
Sequential 1MiB (Q= 8, T= 1): 100.873 MB/s [ 96.2 IOPS] < 82613.63 us>
Sequential 1MiB (Q= 1, T= 1): 49.007 MB/s [ 46.7 IOPS] < 21282.71 us>
Random 4KiB (Q= 32, T=16): 0.640 MB/s [ 156.3 IOPS] <519876.99 us>
Random 4KiB (Q= 1, T= 1): 0.350 MB/s [ 85.4 IOPS] < 11667.33 us>

[Write]
Sequential 1MiB (Q= 8, T= 1): 94.593 MB/s [ 90.2 IOPS] < 85754.18 us>
Sequential 1MiB (Q= 1, T= 1): 95.837 MB/s [ 91.4 IOPS] < 10927.93 us>
Random 4KiB (Q= 32, T=16): 1.091 MB/s [ 266.4 IOPS] <309245.24 us>
Random 4KiB (Q= 1, T= 1): 1.040 MB/s [ 253.9 IOPS] < 3920.22 us>

Profile: Default
Test: 1 GiB (x5) [Interval: 5 sec] <DefaultAffinity=DISABLED>
Date: 2021/11/19 12:27:46
OS: Windows 7 Professional [6.1 Build 7601] (x64)

CrystalDiskMark D


D:\ CDM_20211119121947

------------------------------------------------------------------------------ CrystalDiskMark 7.0.0 x64 (C) 2007-2019 hiyohiyo Crystal Dew World: https://crystalmark.info/ ------------------------------------------------------------------------------ * MB/s = 1,000,000 bytes/s [SATA/600 = 600,000,000 bytes/s] * KB = 1000 bytes, KiB = 1024 bytes

[Read]
Sequential 1MiB (Q= 8, T= 1): 78.859 MB/s [ 75.2 IOPS] <104558.06 us>
Sequential 1MiB (Q= 1, T= 1): 67.952 MB/s [ 64.8 IOPS] < 15376.81 us>
Random 4KiB (Q= 32, T=16): 0.579 MB/s [ 141.4 IOPS] <546235.94 us>
Random 4KiB (Q= 1, T= 1): 0.304 MB/s [ 74.2 IOPS] < 13403.89 us>

[Write]
Sequential 1MiB (Q= 8, T= 1): 76.762 MB/s [ 73.2 IOPS] <107149.88 us>
Sequential 1MiB (Q= 1, T= 1): 57.834 MB/s [ 55.2 IOPS] < 18034.57 us>
Random 4KiB (Q= 32, T=16): 1.084 MB/s [ 264.6 IOPS] <408687.55 us>
Random 4KiB (Q= 1, T= 1): 0.896 MB/s [ 218.8 IOPS] < 4561.90 us>

Profile: Default
Test: 1 GiB (x5) [Interval: 5 sec] <DefaultAffinity=DISABLED>
Date: 2021/11/19 12:19:47
OS: Windows 7 Professional [6.1 Build 7601] (x64)

You neen new line between <details> the image and </details>

https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f#gistcomment-3041229

Without adding new line, the code block does not work as expected.

@niceguysforhelp How did you make the header collapsible above (that too in line). Mine comes below one line and not beside the arrow.

Header

<details>
<summary>
  
# Header
</summary>
<p>
</details>

@darshan315 It seems like we need to use CSS in-order to fix the in-Line problem.

details summary > * { display: inline; }

Some Info:-

-A couple notes on this technique. First, I recommend using inline, and not inline-block, as the line wrapping issue still occurs with inline-block when the heading text extends beyond one line.

-Second, rather than changing the display value of the nested elements, you might be tempted to replace the <summary> element’s default display: list-item value with display: flex. At least I was! However, if we do this, the arrow marker will disappear. Whoops!

---

╵𒄉〢・ᴍʏ sᴛᴀᴛS! 👀

---

---

Unfortunately, I am new to all this, and as far as I remember you can't use CSS on Github or something like that and I don't know how to add the CSS code to make everything work fine. Do message if you get the answer.

Whoop, thanks for posting this. Makes for a much more readable document when including lengthy output sections (like tracebacks, etc...)

wonderful, I was looking for this for a long time.
THANKS

I saw @antranapp's comment and figured out how to do it. here it is

<details open>

  <summary>click to collapse</summary>

  this one starts expanded because of the "open"

</details>

click to collapse

this one starts expanded because of the "open"

Is there a way to have this work with links without having to write the htlm directrly?

@akcasasent

For mentioning links in Markdown, refer to this.

you can also use that in the collapsable section.

Click-Here

youtube

Check this out

this is toggle list

HHH

TESST

hello world

Any advice on how to get it to work in GitHub Pages? In GitHub it looks beautiful.
on the rendered page, much less so.

@Laura-Novich-OBW - you probably want to check out the CSS sections of https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

$\color{darkgray}\text{Unit}_{\Large1}$

$\textit{\large 1. }\textbf{\color{lightyellow}abroad}$ ( $\textit{\color{darkgray}adv}$ )

• $\textit{\color{lightblue}I would love to go abroad this year, perhaps to South of France.}$
• $\textit{\color{lightcyan}...public opposition here and abroad...}$
• $\textit{\color{lightblue}About 65 per cent of its sales come from abroad.}$
• Definition

  in or to a foreign country. (= overseas)

$\textit{\large 2. }\textbf{\color{lightyellow}accustomed to}$ ( $\textit{\color{darkgray}adj}$ )

• $\textit{\color{lightblue}I was accustomed to being the only child at a table full of adults...}$
• $\textit{\color{lightcyan}We were accustomed to working together.}$
• $\textit{\color{lightblue}Her eyes quickly became accustomed to the dark.}$
• Definition

  If you are accustomed to something, you know it so well or have experienced it so often that it seems natural, unsurprising, or easy to deal with.

click to collapse

this one starts expanded because of the "open"