Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Using <details> <summary> expandable content on GitHub with Markdown #details #summary #markdown #gfm #html

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.


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.


Shopping list
  • Vegetables
  • Fruits
  • Fish


#### Example

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

* Vegetables
* Fruits
* Fish


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 It falls back to being expanded all the time.

Similar gist

Copy link

ryanlewis commented Aug 17, 2022

Use pre and code tags to include codeblocks.

with code block
// code here

Copy link

auwsom commented Sep 29, 2022

Is there a way to toggle the content in side toggle? like:

<summary>head 1</summary>

    <summary>head 1.1</summary>


For nested you need to use blockquote to get the indent:

World - click me to open
  • item1
  • item2
  • item3

You only need one blank line above the markdown.
I'm trying to find a tool that converts nested lists in markdown to HTML details and blockquotes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment