rchrd2/using-details-summary-github.md

## using-details-summary-github.md

      
    Raw
  

              using-details-summary-github.md
            
          
    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

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


  Hello!