Details

Details shortcode is a helper for details html5 element¹.

The <details> tag specifies additional details that the user can open and close on demand.

The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.

Any sort of content can be put inside the <details> tag.

Tip: The <summary> tag is used in conjunction with <details> to specify a visible heading for the details.

Details of text

1
2
3
4

{{< details "Details Summary Example: click here to expand" open >}}
### Markdown content
Lorem markdownum insigne...
{{< /details >}}

Details of code

Below is code example, you can click summary to expand.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{{< details title="Code Example" >}}
```cpp
// 'Hello World!' program

#include <iostream>

int main(){
  std::cout << "Hello World!" << std::endl;
  return 0;
}
```
{{< /details >}}

1
2
3
4
5
6
7
8

// 'Hello World!' program

#include <iostream>

int main(){
  std::cout << "Hello World!" << std::endl;
  return 0;
}

Details of hugo short code

Douban

Bilibili

Notice

Gist

Github Code