---
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/id/components/accordion
---

# Accordion Component

 Panel pengungkapan yang ditumpuk secara vertikal dibuat berdasarkan elemen `<details>` dan `<summary>` HTML asli. Khusus CSS, tidak memerlukan JavaScript — dapat diakses sepenuhnya dengan keyboard dan ramah pembaca layar dengan animasi yang halus. Komponen akordeon menggunakan widget pengungkapan asli browser untuk interaksi pengguna yang semantik dan berkinerja baik.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas             | Jenis    | Keterangan                                             |
| ----------------- | -------- | ------------------------------------------------------ |
| accordion         | Basis    | Pembungkus untuk sekelompok panel pengungkapan         |
| accordion-content | Pengubah | Area konten animasi di dalam setiap panel              |
| accordion-flush   | Gaya     | Menghapus batas dan sudut membulat untuk tampilan rata |

## Penggunaan Dasar

Buat akordeon dengan perilaku terbuka eksklusif dengan menggabungkan elemen `<details>` dalam `div.accordion`. Tambahkan atribut `name` yang sama ke setiap `<details>` untuk memastikan hanya satu panel yang tetap terbuka pada satu waktu — perilaku ini diterapkan secara asli oleh browser tanpa memerlukan JavaScript.

## Siram Akordeon

Tambahkan kelas `accordion-flush` bersama `accordion` untuk menghapus batas luar dan padding. Varian ini terintegrasi dengan mulus ke dalam kartu, modals, menu sidebar, atau wadah yang telah memberikan batasan dan spasi visualnya sendiri.

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

## Awalnya Terbuka

Tambahkan atribut `open` ke elemen `<details>` untuk menampilkannya diperluas saat halaman dimuat. Pengguna masih dapat mengubah panel menjadi tertutup — atribut `open` mengatur status visual awal, cocok untuk menyorot informasi penting atau pertanyaan umum.

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

## Panel Independen

Hilangkan atribut `name` dari elemen `<details>` agar beberapa panel dapat dibuka secara bersamaan. Setiap panel beroperasi secara independen tanpa memengaruhi panel lainnya, berguna untuk menampilkan informasi tambahan yang mungkin ingin dibandingkan atau diulas bersama oleh pengguna.

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