# 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

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

```html
<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](https://github.github.com/gfm/#html-block).

#### Example

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

* Vegetables
* Fruits
* Fish

</details>

#### Code

```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