pipeline
28 lines
1.8 KiB
HTML
28 lines
1.8 KiB
HTML
{{- /* faq-accordion.html — accordion over data/faq.yaml (sorted by weight).
|
|
Progressive enhancement: each item is a native <details>/<summary>, so
|
|
every answer is fully readable and keyboard-operable with NO JavaScript.
|
|
Alpine (when present) layers single-open accordion behaviour on top via
|
|
x-bind:open + the native `toggle` event — never hiding content with
|
|
x-cloak. The FAQPage JSON-LD is emitted separately by schema-jsonld.html. */ -}}
|
|
{{- $faqs := sort .Site.Data.faq "weight" -}}
|
|
<div class="mx-auto max-w-3xl divide-y divide-secondary/10 rounded-xl border border-secondary/10" x-data="{ open: null }">
|
|
{{- range $i, $f := $faqs -}}
|
|
<details class="group"
|
|
x-bind:open="open === {{ $i }}"
|
|
@toggle="open = $event.target.open ? {{ $i }} : (open === {{ $i }} ? null : open)">
|
|
<summary id="faq-btn-{{ $i }}" aria-controls="faq-panel-{{ $i }}"
|
|
class="flex w-full cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 text-left text-base font-semibold text-secondary [&::-webkit-details-marker]:hidden">
|
|
<span>{{ $f.question }}</span>
|
|
<svg class="h-5 w-5 shrink-0 text-primary transition-transform duration-200 group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
|
|
</svg>
|
|
</summary>
|
|
<div id="faq-panel-{{ $i }}" role="region" aria-labelledby="faq-btn-{{ $i }}"
|
|
class="px-5 pb-5 text-secondary/80">
|
|
<p>{{ $f.answer }}</p>
|
|
{{- with $f.category }}<p class="mt-2 text-xs uppercase tracking-wide text-secondary/70">{{ . }}</p>{{ end -}}
|
|
</div>
|
|
</details>
|
|
{{- end -}}
|
|
</div>
|