PageWeave/Design

Components / FAQ Accordion

9 Component faqaccordioncollapsequestions .md

FAQ Accordion

Zero-JS collapse with plus markers

Live preview — rendered in this site's theme FAQ Accordion
Is there a free plan?

Yes — full product, forever.

Can I use my own domain?

Pro sites serve on any hostname with SSL.

Usage

<details>-based daisyUI collapse: works before CSS loads, keyboard-accessible for free.

Rules

  • min-h-0 + tight padding overrides daisyUI's chunky default title box.
  • Hairline dividers (divide-y) instead of card-per-question boxes keeps it editorial.
  • Open the first item by default (open) so readers see the pattern.
  • Keep answers to 1–2 sentences; link out for depth instead of nesting paragraphs.
  • For radio-style single-open behavior, swap to the input-based accordion variant.

HTML Copy-paste source

<div class="max-w-2xl mx-auto divide-y divide-base-content/10 border-y border-base-content/10">
  <details class="collapse collapse-plus bg-transparent" open>
    <summary class="collapse-title text-base font-medium tracking-tight py-4 min-h-0">Is there a free plan?</summary>
    <div class="collapse-content text-sm text-base-content/70"><p>Yes — the full product, forever, with a watermark and subdomain.</p></div>
  </details>
  <details class="collapse collapse-plus bg-transparent">
    <summary class="collapse-title text-base font-medium tracking-tight py-4 min-h-0">Can I use my own domain?</summary>
    <div class="collapse-content text-sm text-base-content/70"><p>Pro sites serve on any hostname with automatic SSL; domains are managed at the account level.</p></div>
  </details>
  <details class="collapse collapse-plus bg-transparent">
    <summary class="collapse-title text-base font-medium tracking-tight py-4 min-h-0">Do you support markdown?</summary>
    <div class="collapse-content text-sm text-base-content/70"><p>Every page serves a markdown twin at the same URL with <code>.md</code> appended.</p></div>
  </details>
</div>