Collapse
daisyUI 5 の collapse class を wrap した single open/close ブロック (no-JS、内部の checkbox で開閉制御)。title prop か slot:title でヘッダ、$slot で本文を渡す。icon (null=default / arrow / plus)・bordered (default true)・open (初期 open) の 3 props + title。デフォルトはアイコンなしのミニマル表示で、必要に応じて icon prop でアイコンを opt-in する。複数まとめて FAQ にしたい時はそのまま縦に並べるだけ。
default icon=null (アイコンなし), bordered=true — header をクリックで開閉
これは collapse の本文です。初期状態で :open="true" を指定しているので、ページ表示時から開いています。もう一度ヘッダをクリックすると閉じます。
デフォルトはアイコンなし。no-JS で動作 — 内部の checkbox の checked 状態のみで開閉します。
icon variants — null (default, no icon) / arrow / plus
デフォルト。ヘッダ右側に icon が出ません。ミニマルな見た目。
右側に下向き ▼ が出て、開くと回転します。
右側に + が出て、開くと × に変わります。
bordered=false — ボーダレス表示 (親側で枠を持つ時など)
外周のボーダーが消えて、親要素のレイアウトに溶け込みます。Card やセクション内に埋め込む時に使います。
FAQ 風 — 複数 collapse を縦に並べる
A. いいえ。内部の <input type="checkbox"> の checked 状態だけで開閉します。Alpine.js も含めて、JS は一切走りません。
A. それは <x-accordion> の仕事です。collapse は独立した開閉ブロック、accordion は複数項目で 1 つだけ開く（or multiple モード）UI です。
A. :open="true" を渡してください。内部 checkbox に checked 属性が付きます。
使い方
{{-- 1. 最小 — title prop と本文 slot --}}
<x-collapse title="クリックで開く">
<p>本文をここに書きます。</p>
</x-collapse>
{{-- 2. icon variants: arrow (default) / plus / null --}}
<x-collapse title="plus icon" icon="plus">
<p>...</p>
</x-collapse>
<x-collapse title="アイコンなし" :icon="null">
<p>...</p>
</x-collapse>
{{-- 3. 初期 open --}}
<x-collapse title="開いた状態で start" :open="true">
<p>...</p>
</x-collapse>
{{-- 4. ボーダレス (親側で枠を持つ時) --}}
<x-collapse title="bordered=false" :bordered="false">
<p>...</p>
</x-collapse>
{{-- 5. title を slot で渡す (HTML を含めたい時) --}}
<x-collapse>
<x-slot:titleSlot>
<span class="font-bold">HTML 入り</span> のタイトル
</x-slot:titleSlot>
<p>本文</p>
</x-collapse>