hextra_mirror/layouts/_shortcodes/details.html

{{- /*
A built-in component to display a collapsible content.

@param {string} title The title of the details.
@param {string} closed Whether the details are closed or not (default: false).

@example {{% details title="Details" %}}Content{{% /details %}}
*/ -}}

{{- $title := .Get "title" | default "" -}}
{{- $closed := eq (.Get "closed") "true" | default false -}}

<details class="hx:last-of-type:mb-0 hx:rounded-lg hx:bg-neutral-50 hx:dark:bg-neutral-800 hx:p-2 hx:mt-4 hx:group" {{ if not $closed }}open{{ end }}>
  <summary class="hx:flex hx:items-center hx:cursor-pointer hx:select-none hx:list-none hx:p-1 hx:rounded-sm hx:transition-colors hx:hover:bg-gray-100 hx:dark:hover:bg-neutral-800 hx:before:mr-1 hx:before:inline-block hx:before:transition-transform hx:before:content-[''] hx:dark:before:invert hx:rtl:before:rotate-180 hx:group-open:before:rotate-90">
    <strong class="hx:text-lg">{{ $title | markdownify }}</strong>
  </summary>
  <div class="hx:p-2 hx:overflow-hidden">
    {{ .InnerDeindent | markdownify }}
  </div>
</details>