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

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.

Copy link

Is there a way to remove the blank line between World - click me to open and World?

Copy link

@gavinhungry Oddly, this isn't working for me when I use it in VSCode (the summary still ends up on the line below), and I'm not sure why. I was wondering if you happened to know of any extensions or other workaround that might achieve the same?

Copy link

DeltaPavonis commented Jan 27, 2023

Actually, I found a (rather heavy-handed) workaround to get MD-like formatting in <summary>, from a comment in the other gist linked in the post (link)

Just use HTML tags instead of Markdown to get the formatting you want:

Some bold text code.go link
func main() {}

Code for the above dropdown was

<details><summary><s>Some</s> <b>bold</b> <i>text</i> <code>code.go</code> <a href="//">link</a></summary>

    func main() {}

Hope there's a simpler way, whether code-based or extension-based... I haven't found any extensions on VSCode that allow for the same.

Copy link


Good workaround. Sorry that I can't help with anything VS Code specific, I was really only concerned with formatting on GitHub.

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