Skip to content

Instantly share code, notes, and snippets.

@ericclemmons
Last active October 13, 2025 15:16
Show Gist options
  • Select an option

  • Save ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d to your computer and use it in GitHub Desktop.

Select an option

Save ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d to your computer and use it in GitHub Desktop.
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

@eggplants
Copy link

Does anyone know how to use an image as a summary of details element?

@eggplants
Copy link

eggplants commented Jan 1, 2024

On click of image, I want to expand.


image

foo bar

@sonalk-ux
Copy link

😩

@DerGoogler
Copy link

DerGoogler commented Sep 20, 2024

Summary Goes Here

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

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