HTML5 <details> in GitHub

example.md

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

Level 1

Level 2

Level 3

Last Level

#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}

Level 1

Level 2

Level 3

Last Level

#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}

Level 1

Level 2

Level 3

Last Level

#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}

Level 1

Level 2

Level 3

Last Level

#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}

Level 1

Level 2

Level 3

Last Level

#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}

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

On click of image, I want to expand.

---

foo bar

😩

Summary Goes Here

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