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

# Accordion Component

 Pionowo ułożone panele informacyjne zbudowane na natywnych elementach HTML `<details>` i `<summary>`. Tylko CSS, nie wymaga JavaScript – w pełni dostępny za pomocą klawiatury i przyjazny dla czytnika ekranu z płynnymi animacjami. Komponent akordeon wykorzystuje natywny widżet ujawniania przeglądarki do semantycznych i wydajnych interakcji z użytkownikiem.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa             | Typ         | Opis                                                         |
| ----------------- | ----------- | ------------------------------------------------------------ |
| accordion         | Opierać     | Owijka na grupę paneli ujawnień                              |
| accordion-content | Modyfikator | Animowany obszar zawartości wewnątrz każdego panelu          |
| accordion-flush   | Styl        | Usuwa krawędzie i zaokrąglone rogi, aby uzyskać równy wygląd |

## Podstawowe użycie

Utwórz akordeon z zachowaniem wyłączności-otwartości, zawijając elementy `<details>` w `div.accordion`. Dodaj ten sam atrybut `name` do każdego `<details>`, aby mieć pewność, że tylko jeden panel będzie otwarty w danym momencie — to zachowanie jest wymuszane natywnie przez przeglądarkę i nie wymaga JavaScript.

## Płukany akordeon

Dodaj klasę `accordion-flush` obok klasy `accordion`, aby usunąć zewnętrzne obramowanie i dopełnienie. Ten wariant bezproblemowo integruje się z kartami, modułami, menu na pasku bocznym lub kontenerami, które już zapewniają własne wizualne granice i odstępy.

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

## Początkowo Otwarte

Dodaj atrybut `open` do elementu `<details>`, aby wyświetlić go rozwiniętego podczas ładowania strony. Użytkownicy nadal mogą zamykać panele — atrybut `open` po prostu ustawia początkowy stan wizualny, idealny do wyróżniania ważnych informacji lub często zadawanych pytań.

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

## Niezależne Panele

Pomiń atrybut `name` w elementach `<details>`, aby umożliwić jednoczesne otwarcie wielu paneli. Każdy panel działa niezależnie, nie wpływając na inne, co jest przydatne do wyświetlania dodatkowych informacji, które użytkownicy mogą chcieć porównać lub przejrzeć razem.

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