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

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

@upupqi
Copy link

upupqi commented Aug 16, 2022

test ...this is hidden,collapsable content...

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