How to use
<summary> expandable content on GitHub with Markdown
Firstly, what is
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
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
<summary> on GitHub?
Answer: No, but you don't need it, since GFM allows embedding HTML inside Markdown.
#### Example <details open> <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
Browser support is good https://caniuse.com/#feat=details It falls back to being expanded all the time. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Similar gist https://gist.github.com/ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d
It does actually work if a blank line is used after
</summary. But the arrow ends up on it's own line. So it looks a bit weird.
List of groceries