Skip to main content
Frutjam logoFrutjam
v2.3.0
Theme

Composant pliable

Dernière mise à jour:

Panneau pliable CSS Tailwind uniquement en CSS utilisant l'élément natif <details>. Afficher et masquer les sections de contenu sans JavaScript. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

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 uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

ClasseTaperDescription
collapsibleBaseConteneur pliable piloté par une case à cocher cachée
collapsible-toggleModificateurEntrée de case à cocher cachée qui contrôle l'état d'ouverture/fermeture
collapsible-titleModificateurÉtiquette cliquable qui bascule le pliable
collapsible-contentModificateurZone de contenu animé révélée une fois ouverte
collapsible-arrowModificateurAjoute un indicateur de flèche rotative au titre
collapsible-groupModificateurEmballage pour pliables groupés en accordéon
collapsible-overlayModificateurVariante superposée pour les pliables de type tiroir
collapsible-peekModificateurAffiche un aperçu du contenu une fois réduit
is-collapsible-openModificateurClasse appliquée par JS pour forcer l'état ouvert
is-collapsible-closeModificateurClasse appliquée par JS pour forcer l'état fermé

Utilisation de base

Une case à cocher masquée détermine l'état d'ouverture/fermeture. Le label le déclenche ; le div collapsible-content s'anime et s'ouvre.

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>
  )
}

Avec indicateur de flèche

Ajoutez une collapsible-arrow à l'étiquette pour obtenir un chevron rotatif qui reflète l'état d'ouverture/fermeture.

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>

Plusieurs pliables

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>

Ouvert par défaut

Ajoutez checked à l'entrée de la case à cocher pour ouvrir le panneau.

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>

Contrôlé par JS

Activez collapsible-open sur l'élément wrapper au lieu d'utiliser une case à cocher - utile lorsque le déclencheur réside ailleurs.

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>

Variante de coup d'oeil

collapsible-peek affiche un aperçu découpé avec un fondu dégradé et un déclencheur de superposition. Remplacez --peek-height pour contrôler la quantité de contenu visible une fois réduit.

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>

Aide JS et React

Utilisez createCollapsible depuis frutjam/js ou useCollapsible depuis frutjam/react pour le contrôle programmatique et la synchronisation automatique aria-expanded sur n'importe quel déclencheur.

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>
    </>
  )
}

Déclencheur externe avec groupe pliable

Enveloppez un déclencheur et un pliable dans collapsible-group pour laisser les étiquettes en dehors de .collapsible répondre à son état d'ouverture/fermeture via is-collapsible-open et 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>

Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Pliant sur demande. Fini les cours hallucinés.

Essayez Cherry MCP