メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

折りたたみ可能なコンポーネント

最終更新日:

ネイティブの <details> 要素を使用した CSS のみの Tailwind CSS 折りたたみパネル。 JavaScript を使用せずにコンテンツ セクションを表示および非表示にします。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

{% trans "Collapsible components allow users to expand and collapse sections of content. Built with a hidden checkbox pattern, collapsibles work without any JavaScript and support animated transitions via CSS grid." %}

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
collapsibleベース非表示のチェックボックスによって駆動される折りたたみ可能なコンテナー
collapsible-toggle修飾子開閉状態を制御する非表示のチェックボックス入力
collapsible-title修飾子折りたたみ可能なラベルを切り替えるクリック可能なラベル
collapsible-content修飾子開くとアニメーションコンテンツエリアが表示されます
collapsible-arrow修飾子タイトルに回転矢印インジケーターを追加します
collapsible-group修飾子アコーディオンスタイルのグループ化された折りたたみ可能なラッパー
collapsible-overlay修飾子引き出しスタイルの折りたたみ式オーバーレイのバリエーション
collapsible-peek修飾子折りたたんだときにコンテンツを垣間見ることができます
is-collapsible-open修飾子オープン状態を強制するための JS 適用クラス
is-collapsible-close修飾子クローズ状態を強制するためのJS適用クラス

基本的な使い方

非表示のチェックボックスにより、開閉状態が制御されます。 label がそれをトリガーします。 collapsible-content div がアニメーションで開きます。

This content is hidden until expanded. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="collapsible border border-base-soft rounded-lg">
  <input type="checkbox" class="collapsible-toggle" id="col-basic" />
  <label for="col-basic" class="collapsible-title px-4 py-3 font-medium">Click to expand</label>
  <div class="collapsible-content">
    <div>
      <div class="px-4 pb-3 text-sm opacity-70">
        This content is hidden until expanded.
      </div>
    </div>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useCollapsible } from 'frutjam/react'

export default function CollapsibleDemo() {
  const collapsible = useCollapsible()
  return (
    <div ref={collapsible.ref} className="collapsible border border-base-soft rounded-lg">
      <button className="collapsible-title px-4 py-3 font-medium" onClick={collapsible.toggle}>Click to expand</button>
      <div className="collapsible-content">
        <div>
          <div className="px-4 pb-3 text-sm opacity-70">
            This content is hidden until expanded.
          </div>
        </div>
      </div>
    </div>
  )
}

矢印インジケーター付き

collapsible-arrow をラベルに追加して、開閉状態を反映する回転山形を取得します。

Frutjam is a Tailwind CSS v4 component library built with CSS utilities and a PostCSS plugin.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="collapsible border border-base-soft rounded-lg">
  <input type="checkbox" class="collapsible-toggle" id="col-arrow" />
  <label for="col-arrow" class="collapsible-title collapsible-arrow px-4 py-3 font-medium">What is Frutjam?</label>
  <div class="collapsible-content">
    <div>
      <div class="px-4 pb-3 text-sm opacity-70">
        Frutjam is a Tailwind CSS v4 component library built with CSS utilities and a PostCSS plugin.
      </div>
    </div>
  </div>
</div>

複数の折りたたみ可能

Content for the first section.
Content for the second section.
Content for the third section.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="flex flex-col gap-2">
  <div class="collapsible border border-base-soft rounded-lg">
    <input type="checkbox" class="collapsible-toggle" id="col-1" />
    <label for="col-1" class="collapsible-title collapsible-arrow px-4 py-3 font-medium">Section One</label>
    <div class="collapsible-content">
      <div>
        <div class="px-4 pb-3 text-sm opacity-70">Content for the first section.</div>
      </div>
    </div>
  </div>

  <div class="collapsible border border-base-soft rounded-lg">
    <input type="checkbox" class="collapsible-toggle" id="col-2" />
    <label for="col-2" class="collapsible-title collapsible-arrow px-4 py-3 font-medium">Section Two</label>
    <div class="collapsible-content">
      <div>
        <div class="px-4 pb-3 text-sm opacity-70">Content for the second section.</div>
      </div>
    </div>
  </div>

  <div class="collapsible border border-base-soft rounded-lg">
    <input type="checkbox" class="collapsible-toggle" id="col-3" />
    <label for="col-3" class="collapsible-title collapsible-arrow px-4 py-3 font-medium">Section Three</label>
    <div class="collapsible-content">
      <div>
        <div class="px-4 pb-3 text-sm opacity-70">Content for the third section.</div>
      </div>
    </div>
  </div>
</div>

デフォルトで開く

checked をチェックボックスの入力に追加して、パネルを開いて開始します。

This content is visible on initial load.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="collapsible border border-base-soft rounded-lg">
  <input type="checkbox" class="collapsible-toggle" id="col-open" checked />
  <label for="col-open" class="collapsible-title collapsible-arrow px-4 py-3 font-medium">Open by default</label>
  <div class="collapsible-content">
    <div>
      <div class="px-4 pb-3 text-sm opacity-70">
        This content is visible on initial load.
      </div>
    </div>
  </div>
</div>

JS 制御

チェックボックスを使用する代わりに、ラッパー要素の collapsible-open を切り替えます。トリガーが別の場所にある場合に便利です。

No hidden checkbox needed — state is managed by the collapsible-open class.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="collapsible collapsible-open border border-base-soft rounded-lg" id="js-col">
  <button
    class="collapsible-title collapsible-arrow px-4 py-3 font-medium"
    onclick="this.closest('.collapsible').classList.toggle('collapsible-open')"
  >
    Toggle via JS (starts open)
  </button>
  <div class="collapsible-content">
    <div>
      <div class="px-4 py-3 text-sm opacity-70 border-t border-base-soft">
        No hidden checkbox needed — state is managed by the <code>collapsible-open</code> class.
      </div>
    </div>
  </div>
</div>

ピークのバリアント

collapsible-peek は、グラデーション フェードとオーバーレイ トリガーを備えたクリップされたプレビューを表示します。 --peek-height をオーバーライドして、折りたたまれたときに表示されるコンテンツの量を制御します。

Frutjam is a Tailwind CSS v4 component library built around a PostCSS plugin architecture. Every component is a set of @utility definitions that integrate natively with Tailwind's utility pipeline.

Theming is handled entirely through CSS custom properties. Swap themes by setting a data-theme attribute on any container, or override individual tokens inline.

Components ship with sensible defaults and are designed to compose cleanly.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="collapsible collapsible-peek rounded-xl border border-base-soft" style="--peek-height: 5rem;">
  <input type="checkbox" class="collapsible-toggle" id="col-peek" />
  <div class="collapsible-content">
    <div class="p-4 text-sm leading-relaxed">
      <p>Frutjam is a Tailwind CSS v4 component library built around a PostCSS plugin architecture. Every component is a set of <code>@utility</code> definitions that integrate natively with Tailwind's utility pipeline.</p>
      <p class="mt-3">Theming is handled entirely through CSS custom properties. Swap themes by setting a <code>data-theme</code> attribute on any container, or override individual tokens inline.</p>
      <p class="mt-3">Components ship with sensible defaults and are designed to compose cleanly.</p>
    </div>
  </div>
  <label for="col-peek" class="collapsible-overlay">
    <span class="btn btn-sm">Read more</span>
  </label>
</div>

JS と React ヘルパー

frutjam/js の createCollapsible または frutjam/r​​eact の useCollapsible を使用して、プログラムによる制御と任意のトリガーでの自動 aria-expanded 同期を行います。

Controlled section
Toggled by the external button above.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<button class="btn btn-sm mb-3" id="col-helper-btn">Toggle</button>
<div class="collapsible border border-base-soft rounded-lg" id="js-collapsible">
  <div class="collapsible-title collapsible-arrow px-4 py-3 font-medium">Controlled section</div>
  <div class="collapsible-content">
    <div>
      <div class="px-4 pb-3 text-sm opacity-70">Toggled by the external button above.</div>
    </div>
  </div>
</div>
<script type="module">
  import { createCollapsible } from 'frutjam/js'
  const col = createCollapsible(document.getElementById('js-collapsible'))
  document.getElementById('col-helper-btn').onclick = () => col.toggle()
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { useCollapsible } from 'frutjam/react'

export default function CollapsibleDemo() {
  const collapsible = useCollapsible()
  return (
    <>
      <button className="btn btn-sm mb-3" onClick={collapsible.toggle}>Toggle</button>
      <div ref={collapsible.ref} className="collapsible border border-base-soft rounded-lg">
        <div className="collapsible-title collapsible-arrow px-4 py-3 font-medium">Controlled section</div>
        <div className="collapsible-content">
          <div>
            <div className="px-4 pb-3 text-sm opacity-70">Toggled by the external button above.</div>
          </div>
        </div>
      </div>
    </>
  )
}

折りたたみ可能なグループを使用した外部トリガー

トリガーと折りたたみを collapsible-group でラップして、ラベルを .collapsible の外に配置できるようにします。 is-collapsible-open と is-collapsible-close を介して、その開閉状態に応答します。

Section A
This content is toggled by the button above, which lives outside .collapsible but inside .collapsible-group.
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="collapsible-group border border-base-soft rounded-lg p-4 flex flex-col gap-3">
  <div class="flex items-center justify-between">
    <span class="font-medium">Section A</span>
    <label for="cg-1" class="btn btn-sm btn-ghost">
      <span class="is-collapsible-close">Expand</span>
      <span class="is-collapsible-open">Collapse</span>
    </label>
  </div>
  <div class="collapsible">
    <input type="checkbox" class="collapsible-toggle" id="cg-1" />
    <div class="collapsible-content">
      <div>
        <div class="text-sm opacity-70">
          This content is toggled by the button above, which lives outside <code>.collapsible</code> but inside <code>.collapsible-group</code>.
        </div>
      </div>
    </div>
  </div>
</div>

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な 折りたたみ可能 クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる