Collapse
daisyUI 5 的 collapse 類別包裝，單一開關區塊 (無 JS，內部核取方塊控制開閉)。title 屬性或 slot:title 作頁首，$slot 作本文。icon (null=預設 / arrow / plus)、bordered (預設 true)、open (初始開啟) 3 個屬性 + title。預設為無圖示最小風格，必要時可用 icon 屬性加選圖示。多項組成常見問答時直接縱排即可。
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>