Collapse
Wrapped daisyUI 5 collapse class for a single toggle block (no-JS, checkbox-driven). Pass header via title prop or slot:title, body via $slot. Icons: null (default) / arrow / plus. Props: bordered (default true), open (initial state). Minimal by default; icon is opt-in. Stack multiple for 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>