Requested feature: Github's <details> for collapsing big blocks of text

[hackerb9]

Please implement the <details> and <summary> HTML tags which Github allows for collapsing long blocks of text with a clickable triangle. I like it because it makes a webpage less cluttered, but it's especially handy for error logs and stack traces. Click below for an example copied from gist/scmx:

Example of using &ltdetails>

How to use <details> <summary> expandable content on GitHub with Markdown

Firstly, what is <details> <summary>?

The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details.

Example

Toggle me!

Peek a boo!

<details><summary>Toggle me!</summary>Peek a boo!</details>

Is there a special GFM (GitHub Flavoured Markdown) syntax for using <details> <summary> on GitHub?
Answer: No, but you don't need it, since GFM allows embedding HTML inside Markdown.

Example

Shopping list

• Vegetables
• Fruits
• Fish

Code

#### Example

<details>
<summary>Shopping list</summary>

* Vegetables
* Fruits
* Fish

</details>

Remember that blank lines are needed before/after a section of markdown that is within an html tag, otherwise the markdown won't work

More about details/summary

How about browser support? https://caniuse.com/#feat=details

IE and Edge currently don't support it. But those users will just see it expanded all the time

Here's a polyfill https://github.com/rstacruz/details-polyfill https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Similar gist https://gist.github.com/ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d

---

Ideally, markdown-mode would use something like the custom-visibility widget that is used in M-x customize-emacs to hide options under a very similar triangle. It would also be helpful if there was some sort of indication if the user forgot to put the mandatory blank line after <description>. However, even just a key sequence to insert the boilerplate and leave the cursor after <summary> would be helpful.

Example Boilerplate

<details><summary> </summary>


</details>