Collapse
包装 daisyUI 5 的 collapse 类，单个开/关块（无 JS，内部复选框控制）。通过 title prop 或 slot:title 传递标题，$slot 传递主文本。icon（null=默认 / 箭头 / 加号）、bordered（默认 true）、open（初始打开状态）共 3 个 prop + title。默认是无图标的极简显示，需要时可通过 icon prop 选择图标。多个连接可垂直排列组成常见问题解答。
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>