Skip to content

Instantly share code, notes, and snippets.

Embed
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. 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 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

@Arjun-0000
Copy link

Arjun-0000 commented Mar 13, 2022

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

<details>
<summary>head 1</summary>

    <details>
    <summary>head 1.1</summary>
    content
    </details>

</details>

@itsalinazarpour
Copy link

itsalinazarpour commented Mar 13, 2022

Is there a way to make the second be opened section by default?

Yes, you can write <details open>. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#creating_an_open_disclosure_box I updated one of the examples above to be open.

Thank you 👍👍

@gavinhungry
Copy link

gavinhungry commented Jun 10, 2022

You might also mention that markdown isn't supported inside <summary>...</summary>.

A nice workaround to the extra newline issue that @scmx mentioned is to use any kind of heading in your <summary>:

<details>
<summary>

#### Markdown *in* `summary`

</summary>

Hi.

</details>

Markdown in summary

Hi.

@Arjun-0000
Copy link

Arjun-0000 commented Jun 10, 2022

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

<details>
<summary>head 1</summary>

    <details>
    <summary>head 1.1</summary>
    content
    </details>

</details>
<details><summary>head 1</summary>
      <details><summary>head 1.1</summary>
        content 1.1
    </details>
    <details><summary>head 1.2</summary>
        content 1.2
    </details>
</details>
<details><summary>head 2</summary>
    <details><summary>head 2.1</summary>
        content 1.1
    </details>
    <details><summary>head 2.2</summary>
        content 1.2
    </details>
</details>

I found the solution for nested toggle:

head 1
head 1.1 content 1.1
head 1.2 content 1.2
head 2
head 2.1 content 1.1
head 2.2 content 1.2

@matt212
Copy link

matt212 commented Jul 5, 2022

Hi @Arjun-0000 and @scmx
would it possible to have open from clicking on link
Project Statement

🚀 Project Statement

Click to expand for Project Statement content here

@Arjun-0000
Copy link

Arjun-0000 commented Jul 6, 2022

hello @matt212 , Find below example to see which one is feasible to you


<details><summary>
    
[Head 1](/folder/f1)
    
</summary>
      <details><summary>head 1.1</summary>
        content 1.1
    </details>
    <details><summary>head 1.2</summary>
        content 1.2
    </details>
</details>
<details><summary><a href="/folder/f2">head 2</a></summary>
    <details><summary>head 2.1</summary>
        content 1.1
    </details>
    <details><summary>head 2.2</summary>
        content 1.2
    </details>
</details>

Head 1

head 1.1 content 1.1
head 1.2 content 1.2
head 2
head 2.1 content 1.1
head 2.2 content 1.2

@real-jiakai
Copy link

real-jiakai commented Aug 14, 2022

<details>
<summary>

## close demo
</summary>
This is a default hidden place.
</details>

close demo

This is a default hidden place.

<details>
<summary open>

## open demo
</summary>
This is a default open place.
</details>

open demo

This is a default open place.

@ryanlewis
Copy link

ryanlewis commented Aug 17, 2022

Use pre and code tags to include codeblocks.

with code block
// code here

@auwsom
Copy link

auwsom commented Sep 29, 2022

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

<details>
<summary>head 1</summary>

    <details>
    <summary>head 1.1</summary>
    content
    </details>

</details>

For nested you need to use blockquote to get the indent:
https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab?permalink_comment_id=4319884#gistcomment-4319884

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

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