---
title: "Accordion"
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 Accordion using native HTML elements. Fully accessible and lightweight—supports flush, always-open, and multiple-open variants for FAQs."
url: https://frutjam.com/tr/components/accordion
---

# Accordion Component

 Yerel HTML `<detaylar>` ve `<özet>` öğeleri üzerine oluşturulmuş dikey olarak yığılmış açıklama panelleri. Yalnızca CSS, JavaScript gerekmez; tamamen klavyeden erişilebilir ve pürüzsüz animasyonlarla ekran okuyucu dostudur. Akordeon bileşeni, anlamsal, performanslı kullanıcı etkileşimleri için tarayıcının yerel açıklama widget'ını kullanır.

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                                                                |
| ----------------- | ----------- | -------------------------------------------------------------------- |
| accordion         | Temel       | Bir grup açıklama paneli için sarıcı                                 |
| accordion-content | Değiştirici | Her panelin içindeki animasyonlu içerik alanı                        |
| accordion-flush   | Stil        | Düz bir görünüm için kenarlıkları ve yuvarlatılmış köşeleri kaldırır |

## Temel Kullanım

`<details>` öğelerini bir `div.accordion` içine sararak özel açık davranışa sahip bir akordeon oluşturun. Aynı anda yalnızca bir panelin açık kalmasını sağlamak için her `<detaylar>`'a aynı `ad` özelliğini ekleyin; bu davranış, JavaScript gerektirmeden tarayıcı tarafından yerel olarak uygulanır.

## Akordeon Gömme

Dış kenarlığı ve dolguyu kaldırmak için `accordion` yanına `accordion-flush` sınıfını ekleyin. Bu varyant, halihazırda kendi görsel sınırlarını ve aralıklarını sağlayan kartlara, modellere, kenar çubuğu menülerine veya kapsayıcılara sorunsuz bir şekilde entegre olur.

```html
<div class="accordion accordion-flush">
    <details name="accordion-flush">
        <summary>Email notifications</summary>
        <div class="accordion-content">
            <p>Receive updates about account activity, security alerts, and billing changes directly to your inbox.</p>
        </div>
    </details>
    <details name="accordion-flush">
        <summary>Push notifications</summary>
        <div class="accordion-content">
            <p>Get real-time alerts delivered directly to your device when important events occur.</p>
        </div>
    </details>
    <details name="accordion-flush">
        <summary>Marketing communications</summary>
        <div class="accordion-content">
            <p>Stay informed about new features, component releases, and tips from the Frutjam team.</p>
        </div>
    </details>
</div>
```

## Başlangıçta Açık

Sayfa yüklendiğinde genişletilmiş olarak görüntülemek için bir `<detaylar>` öğesine `open` özelliğini ekleyin. Kullanıcılar panelleri kapatmaya devam edebilir; `open` özelliği yalnızca başlangıçtaki görsel durumu ayarlar; önemli bilgileri veya sık sorulan soruları vurgulamak için mükemmeldir.

```html
<div class="accordion">
    <details name="initially-open" open>
        <summary>Is frutjam UI library built with Tailwind CSS?</summary>
        <div class="accordion-content">
            <p>Yes, frutjam is built with Tailwind CSS. The utility-first approach keeps components lightweight, highly customizable, and easy to integrate into any project.</p>
        </div>
    </details>
    <details name="initially-open">
        <summary>Are pre-built components included?</summary>
        <div class="accordion-content">
            <p>Yes. The library includes 30+ pre-built, responsive components to help you build interfaces faster and more efficiently.</p>
        </div>
    </details>
    <details name="initially-open">
        <summary>Does it work with JavaScript frameworks?</summary>
        <div class="accordion-content">
            <p>Absolutely. Frutjam is pure CSS and works seamlessly with React, Vue, Svelte, Angular, plain HTML, Django templates, and any other framework.</p>
        </div>
    </details>
</div>
```

## Bağımsız Paneller

Birden fazla panelin aynı anda açılmasına izin vermek için `<details>` öğelerinden `name` özelliğini çıkarın. Her panel, diğerlerini etkilemeden bağımsız olarak çalışır; kullanıcıların birlikte karşılaştırmak veya incelemek isteyebilecekleri tamamlayıcı bilgileri görüntülemek için kullanışlıdır.

```html
<div class="accordion">
    <details>
        <summary>Is Frutjam suitable for Django templates?</summary>
        <div class="accordion-content">
            <p>Yes. Frutjam integrates seamlessly with Django templates, enabling backend developers to add customizable, responsive UI components without building them manually.</p>
        </div>
    </details>
    <details>
        <summary>Does it reduce repetitive CSS?</summary>
        <div class="accordion-content">
            <p>Yes. Instead of writing utility classes for each element, you can use ready-made components — speeding up development and keeping your codebase clean.</p>
        </div>
    </details>
    <details>
        <summary>Are ready-made themes included?</summary>
        <div class="accordion-content">
            <p>Yes. Frutjam includes multiple themes you can switch between or customize to match your brand, creating a consistent look with minimal effort.</p>
        </div>
    </details>
</div>
```