{{- $context := .context }}
{{- $content := .content }}
{{- $title := .title | default (T "Expand-title") }}
{{- $title = trim $title " " }}
{{- $expanded := .open | default false }}
{{- if eq (printf "%T" $expanded) "string" }}
	{{- $expanded = (eq $expanded "true") }}
{{- end }}
{{- $direction := T "Reading-direction" | default "ltr" }}
{{- with $context }}
<div class="expand
    {{- if $expanded }} expand-expanded{{ end -}}
">
    {{- $c:=""}}{{/* things are getting complicated when search tries to open the expand box while jquery sets the display CSS on the element */}}
    <a class="expand-label" onclick="$t=$(this); if($t.parent('.expand-expanded.expand-marked').length){ $t.next().css('display','none') }else if($t.parent('.expand-marked').length){ $t.next().css('display','block') }else{ $t.next('.expand-content').slideToggle(100); } $t.parent().toggleClass('expand-expanded');">
        <i class="fas fa-chevron-down"></i>
        <i class="fas fa-chevron-left expand-rtl direction-{{ $direction }}"></i>
        <i class="fas fa-chevron-right expand-ltr direction-{{ $direction }}"></i>
        {{ $title }}
    </a>
    <div class="expand-content" style="display:
        {{- if $expanded }} block{{ else }} none{{ end -}}
    ;">
{{ $content | safeHTML }}
    </div>
</div>
{{- end }}