Open LLM text
Share with AI
Ask Claude Ask ChatGPT Ask Copilot

collapse.html

learn how to use the collapse shortcode

The {{<collapse>}} shortcode is a simple way to create collapsible sections in your documentation. This is great for hiding large amounts of content that you don’t want to overwhelm your readers with.

How it works

The {{<collapse>}} shortcode accepts 2 named args: title and description.

  • title is the title of the collapsible section.
  • description is the content that will be hidden until the user clicks on the title.

Examples

{{<collapse>}}

this is the hidden content.

{{<collapse title="Click me" description="I'm hidden content!">}}

this is the hidden content.

Source code

go
{{- $title := .Get "title" | default "Expand" -}}
{{- $description := .Get "description" -}}
{{- $variant := .Get "variant" | default "default" -}}
{{- $id := .Get "id" | default (printf "collapse-%s-%d" (md5 .Inner) (now.UnixNano)) -}}

{{- if ne hugo.Environment "pdf" -}}
<section class="collapse{{ if ne $variant "default" }} collapse--{{ $variant }}{{ end }}" 
         id="{{ $id }}"
         data-collapse-state="collapsed"
         data-component-state="ready">
    <div class="collapse__header"
         role="button"
         tabindex="0"
         aria-expanded="false"
         aria-controls="{{ $id }}-body"
         data-target="{{ $id }}-body">
        
        <div class="collapse__icon-wrapper">
            <svg class="collapse__icon" 
                 xmlns="http://www.w3.org/2000/svg" 
                 fill="none" 
                 viewBox="0 0 24 24" 
                 stroke-width="2.5" 
                 stroke="currentColor"
                 aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
            </svg>
        </div>
        
        <div class="collapse__content-wrapper">
            {{- with $title -}}
            <h3 class="collapse__title">{{ . }}</h3>
            {{- end -}}
            {{- with $description -}}
            <p class="collapse__description">{{ . }}</p>
            {{- end -}}
        </div>
    </div>
    
    <div class="collapse__body" 
         id="{{ $id }}-body"
         role="region"
         aria-labelledby="{{ $id }}-header">
        <div class="collapse__body-content">
            {{ .Inner | markdownify }}
        </div>
    </div>
</section>

{{/* Inline JS removed. Collapse handled by Collapse components. */}}

{{- else -}}
{{/* PDF fallback - just show content */}}
{{- with $title -}}
<h4>{{ . }}</h4>
{{- end -}}
{{ .Inner | markdownify }}
{{- end -}}