Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente dobrável

Última atualização:

Painel recolhível Tailwind CSS somente CSS usando o elemento nativo <details>. Mostre e oculte seções de conteúdo sem JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

{% 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." %}

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
collapsibleBaseRecipiente dobrável acionado por uma caixa de seleção oculta
collapsible-toggleModificadorEntrada de caixa de seleção oculta que controla o estado aberto/fechado
collapsible-titleModificadorEtiqueta clicável que alterna o recolhível
collapsible-contentModificadorÁrea de conteúdo animado revelada quando aberta
collapsible-arrowModificadorAdiciona um indicador de seta rotativa ao título
collapsible-groupModificadorInvólucro para dobráveis ​​agrupados estilo acordeão
collapsible-overlayModificadorVariante de sobreposição para dobráveis ​​estilo gaveta
collapsible-peekModificadorMostra um vislumbre do conteúdo quando recolhido
is-collapsible-openModificadorClasse aplicada em JS para forçar o estado aberto
is-collapsible-closeModificadorClasse aplicada por JS para forçar o estado fechado

Uso Básico

Uma caixa de seleção oculta determina o estado aberto/fechado. O rótulo o aciona; a div collapsible-content anima a abertura.

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

Com indicador de seta

Adicione seta dobrável ao rótulo para obter uma divisa rotativa que reflete o estado aberto/fechado.

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>

Vários dobráveis

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>

Abrir por padrão

Adicione checked à entrada da caixa de seleção para iniciar a abertura do painel.

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 controlado

Ative collapsible-open no elemento wrapper em vez de usar uma caixa de seleção - útil quando o gatilho reside em outro lugar.

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>

Espiar variante

collapsible-peek mostra uma visualização recortada com um fade gradiente e um gatilho de sobreposição. Substitua --peek-height para controlar quanto conteúdo fica visível quando recolhido.

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>

Ajudante JS e React

Use createCollapsible de frutjam/js ou useCollapsible de frutjam/react para controle programático e sincronização automática aria-expanded em qualquer gatilho.

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

Gatilho externo com grupo dobrável

Coloque um gatilho e um recolhível em collapsible-group para permitir rótulos fora de .collapsible responda ao seu estado aberto/fechado via is-collapsible-open e is-collapsible-close.

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>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Dobrável e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP