Skip to main content
Frutjam logo Frutjam
v2.2.1
Theme

Collapsible Component

CSS-only Tailwind CSS collapsible panel using native

. Show and hide content sections without JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

Class Type Description
collapsibleBaseCollapsible container driven by a hidden checkbox
collapsible-toggleModifierHidden checkbox input that controls open/close state
collapsible-titleModifierClickable label that toggles the collapsible
collapsible-contentModifierAnimated content area revealed when open
collapsible-arrowModifierAdds a rotating arrow indicator to the title
collapsible-groupModifierWrapper for accordion-style grouped collapsibles
collapsible-overlayModifierOverlay variant for drawer-style collapsibles
collapsible-peekModifierShows a glimpse of content when collapsed
is-collapsible-openModifierJS-applied class to force open state
is-collapsible-closeModifierJS-applied class to force closed state

Basic Usage

A hidden checkbox drives the open/close state. The label triggers it; the collapsible-content div animates open.

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

With Arrow Indicator

Add collapsible-arrow to the label to get a rotating chevron that reflects open/close state.

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>

Multiple Collapsibles

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>

Open by Default

Add checked to the checkbox input to start the panel open.

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 Controlled

Toggle collapsible-open on the wrapper element instead of using a checkbox — useful when the trigger lives elsewhere.

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>

Peek Variant

collapsible-peek shows a clipped preview with a gradient fade and an overlay trigger. Override --peek-height to control how much content is visible when collapsed.

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 Helper

Use createCollapsible from frutjam/js or useCollapsible from frutjam/react for programmatic control and automatic aria-expanded sync on any trigger.

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

External Trigger with collapsible-group

Wrap a trigger and a collapsible in collapsible-group to let labels outside .collapsible respond to its open/close state via is-collapsible-open and 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>