> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# FAQ Accordion

Zero-JS collapse with plus markers

- Category: Components
- Tags: faq accordion collapse questions

## 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 source

```html
<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>
```