
GitHub Collapsible Markdown - kantord
https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f
======
gobengo
As others have pointed out, this has nothing to do with with markdown or
github.

The details and summary elements are part of HTML5.

They've been implemented in WebKit and Gecko since at least 2016.

[https://html.spec.whatwg.org/multipage/interactive-
elements....](https://html.spec.whatwg.org/multipage/interactive-
elements.html#the-details-element)

[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/de...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/details)

The more you know!

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

\- [https://github.com/mxstbr/github-markdown-
tricks](https://github.com/mxstbr/github-markdown-tricks)

\- [https://github.com/shaunlebron/github-markdown-
hacks](https://github.com/shaunlebron/github-markdown-hacks)

\- [https://grantwinney.com/cool-markdown-tricks-for-
github/](https://grantwinney.com/cool-markdown-tricks-for-github/)

\- [https://ourcodeworld.com/articles/read/162/tips-and-
tricks-t...](https://ourcodeworld.com/articles/read/162/tips-and-tricks-that-
you-probably-don-t-know-with-the-github-markdown-in-readme-md-files)

If you just search "github markdown tricks", you'll find some others, as well.

------
dwheeler
This is HTML5; this doesn't have anything to do with GitHub or Markdown.

Markdown passes through HTML (by default), and HTML5 includes "details".
Almost all browsers support it, but IE (even IE 11) does not:
[https://caniuse.com/#feat=details](https://caniuse.com/#feat=details) \-
whether or not that matters depends on your users/customers. (You may insert
your complaints about IE here :-) ).

------
chadlavi
... you mean embedded HTML in a markdown file? that's nothing new.

~~~
remi
The “new” thing (if you didn’t know it before) is that GitHub applies a
collapse/expand behavior to <details> elements.

~~~
torgoguys
Isn't that the default behavior of <details> in html documents? Am I missing
something?

~~~
chadlavi
^ this is what I mean, yeah. Isn't that the expected behavior?

------
timdorr
Dependabot (owned by GitHub) uses this to great effect on their automated PRs.

Example: [https://github.com/timdorr/tesla-
trip/pull/107](https://github.com/timdorr/tesla-trip/pull/107)

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.

~~~
nathancahill
First thing I thought of. Their use is perfect.

------
superkuh
You know what Github markdown really needs? It needs for anchors defined in it
to be _actual_ html anchors after interpretation instead of javascript
dependent false anchors that don't work without code execution.

~~~
eyelidlessness
Actual HTML anchors require code execution. Like I get that there is a culture
of resentment of JS on this site, but the hyperbole is a little absurd. HTML
and CSS engines execute code! They can also be made to behave poorly and
slowly. JS can even be used to improve those behaviors for some things. One
way that's relevant to the parent comment is that scrolling to anchors can be
offset to accommodate flexible-height content that obscures them in normal
HTML/CSS.

------
chriswwweb
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"

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

~~~
deckar01
HTML blocks are part of the commonmark spec. The overlap between people who
post too much in issues and know this feature is probably small though. Other
platforms have JS that detects long code blocks and collapse all but the first
few lines by default.

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

~~~
deckar01
Reducing discoverability is it's entire purpose. I use them in comments when I
veer off into a tangent. It keeps a code example from taking up a ton of
vertical real estate, which is nice when threads get long and old comments
become irrelevant.

------
koolba
What’s really cool is this even works with JavaScript disabled. It’s all
html5!

------
vasili111
Anything similar for Gitlab?

~~~
pawelmor
The same works:

    
    
      <details>
      <summary>Title</summary>
      ...
      </details>

~~~
sytse
Yep, and it is documented in
[https://docs.gitlab.com/ee/user/markdown.html#details-and-
su...](https://docs.gitlab.com/ee/user/markdown.html#details-and-summary)

------
globular-toast
This isn't markdown, it's HTML. For the love of God please don't do this. We
already have HTML.

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.

