Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Accordion Component

CSS-only Tailwind CSS accordion using native

/. Expand and collapse content sections with zero JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
accordionBasisPembungkus untuk sekelompok panel pengungkapan
accordion-contentPengubahArea konten animasi di dalam setiap panel
accordion-flushGayaMenghapus 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.

Is frutjam library suitable for use in commercial projects?

Yes, frutjam library is open source and free for both personal and commercial use.

Is frutjam library accessible for screen readers?

The frutjam library follows WAI-ARIA guidelines, including appropriate roles and keyboard navigation support, making it accessible to all users.

Does PageSpeed performance improve when using Frutjam?

Yes. Frutjam uses a CSS-first approach to avoid render-blocking JavaScript. It follows W3C standards, proper color contrast, and native HTML semantics — all contributing to better Core Web Vitals and PageSpeed scores.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="accordion">
    <details name="default-accordion">
        <summary>Is frutjam library suitable for use in commercial projects?</summary>
        <div class="accordion-content">
            <p>Yes, frutjam library is open source and free for both personal and commercial use.</p>
        </div>
    </details>
    <details name="default-accordion">
        <summary>Is frutjam library accessible for screen readers?</summary>
        <div class="accordion-content">
            <p>The frutjam library follows WAI-ARIA guidelines, including appropriate roles and keyboard navigation support, making it accessible to all users.</p>
        </div>
    </details>
    <details name="default-accordion">
        <summary>Does PageSpeed performance improve when using Frutjam?</summary>
        <div class="accordion-content">
            <p>Yes. Frutjam uses a CSS-first approach to avoid render-blocking JavaScript. It follows W3C standards, proper color contrast, and native HTML semantics — all contributing to better Core Web Vitals and PageSpeed scores.</p>
        </div>
    </details>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div className="accordion">
    <details name="default-accordion">
        <summary>Is frutjam library suitable for use in commercial projects?</summary>
        <div className="accordion-content">
            <p>Yes, frutjam library is open source and free for both personal and commercial use.</p>
        </div>
    </details>
    <details name="default-accordion">
        <summary>Is frutjam library accessible for screen readers?</summary>
        <div className="accordion-content">
            <p>The frutjam library follows WAI-ARIA guidelines, including appropriate roles and keyboard navigation support, making it accessible to all users.</p>
        </div>
    </details>
    <details name="default-accordion">
        <summary>Does PageSpeed performance improve when using Frutjam?</summary>
        <div className="accordion-content">
            <p>Yes. Frutjam uses a CSS-first approach to avoid render-blocking JavaScript. It follows W3C standards, proper color contrast, and native HTML semantics — all contributing to better Core Web Vitals and PageSpeed scores.</p>
        </div>
    </details>
</div>

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.

Email notifications

Receive updates about account activity, security alerts, and billing changes directly to your inbox.

Push notifications

Get real-time alerts delivered directly to your device when important events occur.

Marketing communications

Stay informed about new features, component releases, and tips from the Frutjam team.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<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.

Is frutjam UI library built with Tailwind CSS?

Yes, frutjam is built with Tailwind CSS. The utility-first approach keeps components lightweight, highly customizable, and easy to integrate into any project.

Are pre-built components included?

Yes. The library includes 30+ pre-built, responsive components to help you build interfaces faster and more efficiently.

Does it work with JavaScript frameworks?

Absolutely. Frutjam is pure CSS and works seamlessly with React, Vue, Svelte, Angular, plain HTML, Django templates, and any other framework.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<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.

Is Frutjam suitable for Django templates?

Yes. Frutjam integrates seamlessly with Django templates, enabling backend developers to add customizable, responsive UI components without building them manually.

Does it reduce repetitive CSS?

Yes. Instead of writing utility classes for each element, you can use ready-made components — speeding up development and keeping your codebase clean.

Are ready-made themes included?

Yes. Frutjam includes multiple themes you can switch between or customize to match your brand, creating a consistent look with minimal effort.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<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>