Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Akkordeon-Komponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Akkordeon mit nativem <details>/<summary>. Erweitern und reduzieren Sie Inhaltsabschnitte ohne JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Vertikal gestapelte Offenlegungsbereiche, die auf nativen HTML-Elementen <details> und <summary> basieren. Nur CSS, kein JavaScript erforderlich – vollständig über die Tastatur zugänglich und bildschirmleserfreundlich mit flüssigen Animationen. Die Accordion-Komponente nutzt das native Offenlegungs-Widget des Browsers für semantische, performante Benutzerinteraktionen.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
accordionBaseWrapper für eine Gruppe von Offenlegungspanels
accordion-contentModifikatorAnimierter Inhaltsbereich in jedem Panel
accordion-flushStilEntfernt Ränder und abgerundete Ecken für ein bündiges Aussehen

Grundlegende Verwendung

Erstellen Sie ein Akkordeon mit exklusivem Öffnungsverhalten, indem Sie <details>-Elemente in ein div.accordion einschließen. Fügen Sie jedem <details> das gleiche name-Attribut hinzu, um sicherzustellen, dass jeweils nur ein Bereich geöffnet bleibt – dieses Verhalten wird nativ vom Browser erzwungen, ohne dass JavaScript erforderlich ist.

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>

Flush-Akkordeon

Fügen Sie die Klasse accordion-flush neben accordion hinzu, um den äußeren Rahmen und die Auffüllung zu entfernen. Diese Variante lässt sich nahtlos in Karten, Modalitäten, Seitenleistenmenüs oder Container integrieren, die bereits ihre eigenen visuellen Grenzen und Abstände bieten.

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>

Zunächst geöffnet

Fügen Sie das Attribut open zu einem Element <details> hinzu, um es beim Laden der Seite erweitert anzuzeigen. Benutzer können Panels weiterhin schließen – das Attribut open legt einfach den anfänglichen visuellen Zustand fest, perfekt zum Hervorheben wichtiger Informationen oder häufig gestellter Fragen.

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>

Unabhängige Gremien

Lassen Sie das Attribut name aus <details>-Elementen weg, damit mehrere Panels gleichzeitig geöffnet sein können. Jedes Panel arbeitet unabhängig, ohne andere zu beeinflussen, und ist nützlich für die Anzeige zusätzlicher Informationen, die Benutzer möglicherweise gemeinsam vergleichen oder überprüfen möchten.

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Akkordeon-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP