Skip to content

Instantly share code, notes, and snippets.

@ericclemmons
Last active February 22, 2024 16:18
Star You must be signed in to star a gist
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

@MarcosYonamine963
Copy link

Nested details:

Code:

  * <details><summary>1 <a href="#cap1"> 1- Introduction</a></summary><ul>
     <li><details><summary> 1.1 <a href="cap1_1"> Second Level 1 </a> </summary> <ul> 
           <li>1.1.1 <a href="cap1_1_1"> Third 1a </a> </li>
           <li>1.1.2 <a href="cap1_1_2"> Third 2a</a> </li>
           <li>1.1.3 <a href="cap1_1_3"> Third 3a</a> </li>
     </ul></details></li> <!-- End 1 -->
     <li><details><summary> 1.2 <a href="cap1_2"> Second Level 2 </a> </summary> <ul> 
           <li>1.2.1 <a href="cap1_2_1"> Third 1b</a> </li>
           <li>1.2.2 <a href="cap1_2_1"> Third 2b</a> </li>
           <li>1.2.3 <a href="cap1_2_1"> Third 3b</a> </li>
     </ul></details></li> <!-- End  2-->
     <li>1.5 <a href="cap1_5"> Alone 1</a> </li>
     <li>1.6 <a href="cap1_6"> Alone 2</a> </li>
   </ul> <!-- End -->
  </details>

@Muaath5
Copy link

Muaath5 commented Dec 23, 2023

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";
}

@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

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