Ir al contenido principal
Frutjam logo Frutjam
v2.2.5
Theme

Componente de acordeón

Última actualización:

Acordeón CSS Tailwind solo para CSS que utiliza <detalles>/<summary> nativo. Expanda y contraiga secciones de contenido sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Paneles informativos apilados verticalmente creados sobre elementos HTML nativos <details> y <summary>. Solo CSS, no se requiere JavaScript: totalmente accesible mediante teclado y compatible con lectores de pantalla con animaciones fluidas. El componente acordeón utiliza el widget de divulgación nativo del navegador para interacciones semánticas y de alto rendimiento del usuario.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
accordionBaseEnvoltorio para un grupo de paneles de divulgación
accordion-contentModificadorÁrea de contenido animado dentro de cada panel.
accordion-flushEstiloElimina bordes y esquinas redondeadas para una apariencia al ras

Uso básico

Cree un acordeón con comportamiento de apertura exclusiva envolviendo elementos <details> en un div.accordion. Agregue el mismo atributo name a cada <details> para garantizar que solo un panel permanezca abierto a la vez; este comportamiento lo aplica de forma nativa el navegador sin necesidad de 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>

Acordeón al ras

Agregue la clase accordion-flush junto a accordion para eliminar el borde exterior y el relleno. Esta variante se integra perfectamente en tarjetas, modales, menús de barra lateral o contenedores que ya proporcionan sus propios límites y espacios visuales.

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>

Inicialmente abierto

Agregue el atributo open a un elemento <details> para mostrarlo expandido cuando se carga la página. Los usuarios aún pueden cerrar los paneles: el atributo open simplemente establece el estado visual inicial, perfecto para resaltar información importante o preguntas frecuentes.

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>

Paneles independientes

Omita el atributo name de los elementos <details> para permitir que se abran varios paneles simultáneamente. Cada panel funciona de forma independiente sin afectar a los demás, lo que resulta útil para mostrar información complementaria que los usuarios pueden querer comparar o revisar juntos.

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>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Acordeón según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP