---
title: "Collapsible"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "JS-free Tailwind CSS Collapsible using native details/summary. Accessible disclosure for FAQs, nested navigation, and expandable content sections."
url: https://frutjam.com/tr/components/collapsible
---

# Collapsible Component

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

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf                | Tip         | Tanım                                                              |
| -------------------- | ----------- | ------------------------------------------------------------------ |
| collapsible          | Temel       | Gizli bir onay kutusuyla yönlendirilen katlanabilir konteyner      |
| collapsible-toggle   | Değiştirici | Açık/kapalı durumunu kontrol eden gizli onay kutusu girişi         |
| collapsible-title    | Değiştirici | Katlanabilirliği değiştiren tıklanabilir etiket                    |
| collapsible-content  | Değiştirici | Animasyonlu içerik alanı açıldığında ortaya çıkıyor                |
| collapsible-arrow    | Değiştirici | Başlığa dönen bir ok göstergesi ekler                              |
| collapsible-group    | Değiştirici | Akordeon tarzı gruplandırılmış katlanabilir malzemeler için sarıcı |
| collapsible-overlay  | Değiştirici | Çekmece tarzı katlanabilir parçalar için kaplama çeşidi            |
| collapsible-peek     | Değiştirici | Daraltıldığında içeriğe kısa bir bakış gösterir                    |
| is-collapsible-open  | Değiştirici | Açık durumu zorlamak için JS uygulamalı sınıf                      |
| is-collapsible-close | Değiştirici | Kapalı durumu zorlamak için JS uygulamalı sınıf                    |

## Temel Kullanım

Gizli bir onay kutusu açma/kapama durumunu yönlendirir. `label` bunu tetikler; `daraltılabilir içerik` div açık animasyonu gerçekleştirir.

## Ok Göstergeli

Açık/kapalı durumunu yansıtan dönen bir şerit elde etmek için etikete `daraltılabilir ok` ekleyin.

```html
<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>
```

## Çoklu Katlanabilirler

```html
<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>
```

## Varsayılan Olarak Aç

Paneli açmaya başlamak için onay kutusu girişine `checked` ekleyin.

```html
<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 Kontrollü

Onay kutusu kullanmak yerine sarmalayıcı öğesinde `daraltılabilir-aç` seçeneğini değiştirin; tetikleyici başka bir yerde bulunduğunda kullanışlıdır.

```html
<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>
```

## Gözetleme Varyantı

`daraltılabilir peek`, degrade geçişli ve kaplama tetikleyicili kırpılmış bir önizleme gösterir.
 Daraltıldığında ne kadar içeriğin görüneceğini kontrol etmek için `--peek-height` değerini geçersiz kılın.

```html
<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 ve Tepki Yardımcısı

Programlı kontrol ve herhangi bir tetikleyicide otomatik `aria-expanded` senkronizasyonu için `frutjam/js`'den `createCollapsible`'ı veya `frutjam/react`'tan `useCollapsible`'u kullanın.

## Katlanabilir gruplu Harici Tetikleyici

Etiketlerin `.collapsible` dışında kalmasına izin vermek için `collapsible-group` içine bir tetikleyici ve bir daraltılabilir öğe sarın `is-collapsible-open` ve `is-collapsible-close` yoluyla açık/kapalı durumuna yanıt verir.

```html
<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>
```