Add support for <details> via shortcode

Author: Tim Bannister

assets/scss/_documentation.scss

@@ -238,6 +238,21 @@ body.td-home #deprecation-warning {
     margin-right: auto;
 }
 
+// <details> shortcode
+
+details > summary {
+  margin-bottom: 1em;
+  color: $primary;
+  background: transparent;
+}
+
+details:not([open]) > summary:after {
+  content: '…';
+  display: inline-block;
+}
+
+// glossary
+
 body.glossary {
   main {
     ul.glossary-terms > li {

content/en/docs/contribute/style/hugo-shortcodes/index.md

@@ -370,6 +370,34 @@ Add the shortcode:
 
 before the item, or just below the heading for the specific item.
 
+## Details
+
+You can render a `<details>` HTML element using a shortcode:
+
+```markdown
+{{</* details summary="More about widgets" */>}}
+The frobnicator extension API implements _widgets_ using example running text.
+
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
+dolore magnam aliquam quaerat voluptatem.
+{{</* /details */>}}
+```
+
+This renders as:
+{{< details summary="More about widgets" >}}
+The frobnicator extension API implements _widgets_ using example running text.
+
+Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
+dolore magnam aliquam quaerat voluptatem.
+{{< /details >}}
+
+{{< note >}}
+Use this shortcode sparingly; it is usually best to have all of the text directly shown
+to readers.
+{{< /note >}}
+
 ## Version strings
 
 To generate a version string for inclusion in the documentation, you can choose from

layouts/shortcodes/details.html

@@ -0,0 +1,12 @@
+{{- $summary := "" -}}
+{{- if .IsNamedParams -}}
+  {{- $summary = .Get "summary" -}}
+{{- end -}}
+<details>
+  {{- if ne $summary "" -}}
+    <summary>{{ $summary }}</summary>
+  {{- end -}}
+  <div class="details-inner">
+    {{ .Inner | markdownify }}
+  </div>
+</details>