Using <details> <summary> expandable content on GitHub with Markdown #details #summary #markdown #gfm #html

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

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

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

It does actually work if a blank line is used after <summary> and before </summary. But the arrow ends up on it's own line. So it looks a bit weird.

List of groceries

• Vegetables

<details>

<summary>

*List of groceries*

</summary>

* Vegetables

</details>

It is currently supported on Edge, so you might like to edit that quote...and in IE - never mind.

@scmx Thanks!

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

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.

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>

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

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.

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

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

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

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

Use pre and code tags to include codeblocks.

with code block

// code here

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.

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

@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?

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

```go
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="//example.com">link</a></summary>

    ```go
    func main() {}
    ```
</details>

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.

Is there a way to make the summary bigger font? I tried to wrap the entire details, but it sized everything inside, while I would like only the "header"

@Volume999, it's shown above¹, use at least 1 empty line after the <summary> and markdown can be used for the summary.

Summary (h1)

content is regular size

<details><summary>

# Summary (h1)
</summary>
content
</details>

Summary (h2)

content is regular size

<details><summary>

## Summary (h2)
</summary>
content
</details>

Summary (h3)

content is a regular size

<details><summary>

### Summary (h3)
</summary>
content
</details>

Footnotes

1. https://gist.github.com/scmx/eca72d44afee0113ceb0349dd54a84a2?permalink_comment_id=4195815#gistcomment-4195815 ↩

You can also use the <strong> tag directly inside summary:

summary

hidden

Anybody manage to get this working with restructuredtext?

I am also upgrading to Docusaurus 3.1.1 and getting this error for .md files with code in them:
Unexpected lazy line in expression in container, expected line to be prefixed with >when in a block quote, whitespace when in a list, etc

It works for simple answers, but for longer README.md, the behavior is not consistent everywhere in every browsers.

Capture:

We have to pass an information such as Click to expand or why not an emoji like 👀, so it does render almost well everywhere.

<details>
<summary>👀
 
 ## Installation into *System*
</summary>

Make sure `./.local/bin` is sourced in your *PATH*

And run `./best_program.sh --install`

</details>

👀

Installation into System

Make sure ./.local/bin is sourced in your PATH

And run ./best_program.sh --install

LaTeX math blocks in details are buggy and only seem to work if there is no previous math on the page. For example:

<details>
<summary>Math</summary>

$$
1 + 1 = 2
$$
</details>

It works once:

Math

$$ 1 + 1 = 2 $$

But it doesn't work twice:

Math

$$
1 + 1 = 2
$$

Top-level math blocks still works:

$$ 1 + 1 = 2 $$

It doesn't seem to be a problem for other tags like <div>, just <details>.

The only workaround I've found is to use inline math, which always works in details:

Inline math

$1 + 1 = 2$

Inline math

$1 + 1 = 2$

Is there any workaround for the math blocks?

Ok, nevermind, I found a workaround for the math blocks. For some reason it works as long the whole block is put on one line with no spaces immediately after the first $$ in the math block. In my own gist, I can also put newlines in the math block as long as there are no spaces or newlines immediately after the first $$, but in this comment it seems it only works if it is entirely on one line.

<details>
<summary>Math</summary>

$$1 + 1 = 2$$
</details>

Math

$$1 + 1 = 2$$

Math

$$1 + 1 =2$$

Edit (2024-09-08): Looks like they broke the workaround, now math blocks get converted into inline math when you do this :(
Thankfully, fenced math blocks work:

Fenced math

$$1 + 1 = 2$$

Fenced math

$$1 + 1 = 2$$

How to prevent breaking when .md file is hosted on GitHub pages?