1 files changed, 75 insertions, 0 deletions
diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
new file mode 100644
index 0000000..ca524f7
--- /dev/null
+++ b/layouts/shortcodes/details.html
@@ -0,0 +1,75 @@
+{{- /*
+Renders an HTML details element.
+
+@param {string} [class] The value of the element's class attribute.
+@param {string} [name] The value of the element's name attribute.
+@param {string} [summary] The content of the child summary element.
+@param {string} [title] The value of the element's title attribute.
+@param {bool} [open=false] Whether to initially display the content of the details element.
+
+@reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
+
+@examples
+
+  {{< details >}}
+  A basic collapsible section.
+  {{< /details >}}
+
+  {{< details summary="Custom Summary Text" >}}
+  Showing custom `summary` text.
+  {{< /details >}}
+
+  {{< details summary="Open Details" open=true >}}
+  Contents displayed initially by using `open`.
+  {{< /details >}}
+
+  {{< details summary="Styled Content" class="my-custom-class" >}}
+  Content can be styled with CSS by specifying a `class`.
+
+  Target details element:
+
+  ```css
+  details.my-custom-class { }
+  ```
+
+  Target summary element:
+
+  ```css
+  details.my-custom-class > summary > * { }
+  ```
+
+  Target inner content:
+
+  ```css
+  details.my-custom-class > :not(summary) { }
+  ```
+  {{< /details >}}
+
+  {{< details summary="Grouped Details" name="my-details" >}}
+  Specifying a `name` allows elements to be connected, with only one able to be open at a time.
+  {{< /details >}}
+
+*/}}
+
+{{- /* Get arguments. */}}
+{{- $class := or (.Get "class") "" }}
+{{- $name := or (.Get "name") "" }}
+{{- $summary := or (.Get "summary") "Details" }}
+{{- $title := or (.Get "title") "" }}
+{{- $open := false }}
+{{- if in (slice "false" false 0) (.Get "open") }}
+  {{- $open = false }}
+{{- else if in (slice "true" true 1) (.Get "open") }}
+  {{- $open = true }}
+{{- end }}
+
+{{- /* Render. */}}
+<details
+  {{- with $class }} class="{{ . }}" {{- end }}
+  {{- with $name }} name="{{ . }}" {{- end }}
+  {{- with $open }} open {{- end }}
+  {{- with $title }} title="{{ . }}" {{- end -}}
+>
+  <summary>{{ $summary | .Page.RenderString }}</summary>
+  {{ .Inner | .Page.RenderString (dict "display" "block") -}}
+</details>
+\ No newline at end of file