Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML5 <details> in GitHub

Using <details> in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

<details>
 <summary>Summary Goes Here</summary>
 ...this is hidden, collapsable content...
</details>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

A collapsible section with markdown

Click to expand!
def func():
    return 'hello, world!'

Nested

root
bin
nest1
a
b
c
nest2

a b c

file1
file2
file3
boot

x y z

dev

p q r

etc

e t c

home

me you everyone

lib

lib er ate

@cdstanford
Copy link

cdstanford commented Sep 19, 2018

In Jekyll / Github Pages, even with a blank line the text inside "details" is NOT formatted correctly. It works here on Github:

Spoiler:

First line

Second line

But when I put the same thing into a .md file and run Jekyll serve, I get a sad result:

1

@learnwell
Copy link

learnwell commented Dec 12, 2018

To add to @cdstanford's comment above ... based on my experiments, mixing markdown formatting into details and summary is a mixed bag. And I am specifically talking about what ends up being presented on github pages with markdown: kramdown

  1. Expand/Collapse WORKS in general as a standalone, separate from any other markdown in the .md file

    <details> <summary>Spoiler</summary> my extra lines </details>
    
  2. Expand/Collapse WORKS when Nesting details inside a markdown bullet:

    * <details> <summary>Spoiler</summary> my extra lines </details>
    
  3. Expand/Collapse Does NOT work if details need to be a sub-bullet:

    * <details> <summary>Spoiler</summary>
        * my extra lines</details>
    
  4. Formatting Does NOT work if details need to bold or code formatting:

    * <details> <summary>Spoiler</summary> my `extra` **lines** </details>
    

@nathanl
Copy link

nathanl commented Mar 7, 2019

You can also put a <pre> inside the <details>

@sameerkrmishra
Copy link

sameerkrmishra commented Mar 14, 2019

A collapsible section with markdown

Click to expand!

Heading

  1. A numbered
  2. list
    • With some
    • Sub bullets

@sameerkrmishra
Copy link

sameerkrmishra commented Mar 14, 2019

A collapsible section with markdown

Click to expand!
def func():
    return 'hello, world!'

@Phroneris
Copy link

Phroneris commented Mar 26, 2019

Super nice feature! ... except that the opened <summary> element is too narrow (has no margin) at the bottom, I feel.
I hope some kind of CSS like this is applied to GitHub for better appearance...

details[open] summary {
    margin-bottom: 16px;
}

@allpro
Copy link

allpro commented May 17, 2019

Super nice feature! ... except that the opened <summary> element is too narrow (has no margin) at the bottom, I feel.
I hope some kind of CSS like this is applied to GitHub for better appearance...

details[open] summary {
    margin-bottom: 16px;
}

I use <br />&nbsp; at the end of my <summary> content to add an extra line of spacing. HTML works inside this tag. Give it a try.

@CHaNGeTe
Copy link

CHaNGeTe commented Jul 23, 2019

It will be cool to have an attribute to indicate "default opened" but collapsible

@andrmueller
Copy link

andrmueller commented Oct 10, 2019

It will be cool to have an attribute to indicate "default opened" but collapsible

This already exists:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Attribute: "open"

i.e.:

<details open>
    <summary>some summary</summary>
    some opened collapsible
</details>
some summarysome opened collapsible

@nanxiaobei
Copy link

nanxiaobei commented Apr 24, 2020

some summary > some opened collapsible

@nanxiaobei
Copy link

nanxiaobei commented Apr 24, 2020

some summary
some opened collapsible

@RomanSoloweow
Copy link

RomanSoloweow commented Jul 5, 2020

It would be nice to be able to use details in numbered and bulleted lists

@David-Tennant
Copy link

David-Tennant commented Aug 3, 2020

@RomanSoloweow Looks ugly but works

<details>
<summary>some summary</summary>

A list
- Another list item
- <details><summary>some summary</summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est tellus, convallis eget vulputate ut, eleifend vel mauris. Maecenas consequat aliquam tortor quis bibendum</details>
- Another list item

</details>
some summary

A list

  • Another list item
  • some summaryLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est tellus, convallis eget vulputate ut, eleifend vel mauris. Maecenas consequat aliquam tortor quis bibendum
  • Another list item

@TotallyInformation
Copy link

TotallyInformation commented Mar 14, 2021

I just wish that GitHub markdown made headings collapsible.

@AntonisPapasavva
Copy link

AntonisPapasavva commented May 4, 2021

I have a problem on my website with this.
Normal text on my website is smaller than the text within the details. So, the text within "details" looks like 2+ pt bigger than the rest of the text on my site.
Does anyone know why? How can I fix this?

@Mwea
Copy link

Mwea commented Jun 10, 2021

test

+ pp[p
- oo[o

@BR0kEN-
Copy link

BR0kEN- commented Jul 19, 2021

Configuration example
{"a": "b"}

@rubek-joshi
Copy link

rubek-joshi commented Nov 22, 2021

Can you use md markup for linking inside the <summary/> tag? It seems to work inside the <details/> tag.

@phanirithvij
Copy link

phanirithvij commented Apr 23, 2022

@rubek-joshi It is possible but there is a catch, it can't be markdown formatting because a new line is required for markdown parsers to parse and render them.

So this is possible

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

But not with markdown but with HTML tags

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

can use markdown if you don't mind a newline in your summary link

interface{}

i.e.

<details><summary>

can use *markdown* ~if~ you don't mind a `newline` in _your_ summary [link](//example.com) </summary>
    ```go
    interface{}
    ```
</details>
You can go even crazier and have a multiline image, stack trace, etc. in the summary

hek

slim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
... show more
slim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
temple (0.7.7) lib/temple/engine.rb:50:in call' temple (0.7.7) lib/temple/mixins/template.rb:10:incompile'
temple (0.7.7) lib/temple/templates/tilt.rb:30:in prepare' tilt (2.0.5) lib/tilt/template.rb:92:ininitialize'
sprockets (3.6.2) lib/sprockets/legacy_tilt_processor.rb:25:in new' sprockets (3.6.2) lib/sprockets/legacy_tilt_processor.rb:25:incall'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:75:in call_processor' sprockets (3.6.2) lib/sprockets/processor_utils.rb:57:inblock in call_processors'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:in reverse_each' sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.6.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.6.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.6.2) lib/sprockets/loader.rb:317:in fetch_asset_from_dependency_cache' sprockets (3.6.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:inyield'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:in load' sprockets (3.6.2) lib/sprockets/bundle.rb:23:inblock in call'
sprockets (3.6.2) lib/sprockets/utils.rb:196:in dfs' sprockets (3.6.2) lib/sprockets/bundle.rb:24:incall'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:75:in call_processor' sprockets (3.6.2) lib/sprockets/processor_utils.rb:57:inblock in call_processors'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:in reverse_each' sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.6.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.6.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.6.2) lib/sprockets/loader.rb:317:in fetch_asset_from_dependency_cache' sprockets (3.6.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:inyield'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:in load' sprockets (3.6.2) lib/sprockets/base.rb:66:infind_asset'

Like this

<details>
<summary>

![hek](https://picsum.photos/40/40)
    ```ruby
    slim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
    slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
    slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
    temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
    ... show more
    ```
</summary>
...
</details>

@TomasMiskov
Copy link

TomasMiskov commented May 27, 2022

Is it possible to include (Python) code inside summary and serve it on a Jekyll site such that it holds onto the same formatting as a chunk of code that's not inside the summary tag?

So far I either get no formatting at all, or when using pre tag inside summary I get some default formatting but not the one of my style.

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