As others have pointed out, this has nothing to do with with markdown or github.<p>The details and summary elements are part of HTML5.<p>They've been implemented in WebKit and Gecko since at least 2016.<p><a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element" rel="nofollow">https://html.spec.whatwg.org/multipage/interactive-elements....</a><p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/de...</a><p>The more you know!
If you search around, there is a handful of specific GitHub markdown tricks that (for some reason) they don't officially document on their own help docs. Here is a few I found quickly searching:<p>- <a href="https://github.com/mxstbr/github-markdown-tricks" rel="nofollow">https://github.com/mxstbr/github-markdown-tricks</a><p>- <a href="https://github.com/shaunlebron/github-markdown-hacks" rel="nofollow">https://github.com/shaunlebron/github-markdown-hacks</a><p>- <a href="https://grantwinney.com/cool-markdown-tricks-for-github/" rel="nofollow">https://grantwinney.com/cool-markdown-tricks-for-github/</a><p>- <a href="https://ourcodeworld.com/articles/read/162/tips-and-tricks-that-you-probably-don-t-know-with-the-github-markdown-in-readme-md-files" rel="nofollow">https://ourcodeworld.com/articles/read/162/tips-and-tricks-t...</a><p>If you just search "github markdown tricks", you'll find some others, as well.
This is HTML5; this doesn't have anything to do with GitHub or Markdown.<p>Markdown passes through HTML (by default), and HTML5 includes "details". Almost all browsers support it, but IE (even IE 11) does not: <a href="https://caniuse.com/#feat=details" rel="nofollow">https://caniuse.com/#feat=details</a> - whether or not that matters depends on your users/customers. (You may insert your complaints about IE here :-) ).
Dependabot (owned by GitHub) uses this to great effect on their automated PRs.<p>Example: <a href="https://github.com/timdorr/tesla-trip/pull/107" rel="nofollow">https://github.com/timdorr/tesla-trip/pull/107</a><p>The show the recent release notes, changelogs, and recent commit history behind what you're about to upgrade. That's immensely helpful when deciding what you want to update in your dependency list, especially if there are breaking changes. Dependency management is much less of a pain this way.
You know what Github markdown really needs? It needs for anchors defined in it to be <i>actual</i> html anchors after interpretation instead of javascript dependent false anchors that don't work without code execution.
I wish more people would actually use this to wrap their 5'000 lines of console output that they copy paste into a ticket when reporting a bug instead of using markdown "format as code"<p>Also yes it is a "hack" and not official markdown, but for the use case I mention it has the huge advantage to not make tickets including all the comments excessively long
This is cool but I would not use this at all. I think this might just decrease discoverability/readability of READMEs that are already too long/complicated.
This isn't markdown, it's HTML. For the love of God please don't do this. We already have HTML.<p>Emacs has been able to collapse markdown for a long time now. There's no reason why that can't be implemented in other renderers.