# Accordion (contenido expandible)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-accordion.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Interacción

Organiza bloques extensos en secciones que se pueden abrir y cerrar con controles nativos.

v2.0

+
## Mejora progresiva
Details y summary funcionan sin JS; el módulo añade la transición.

⇥
## Teclado nativo
Cada encabezado puede activarse desde el teclado.

↕
## Lectura progresiva
Reduce la densidad inicial sin retirar el contenido del documento.

i
## Título informativo
Cada activador debe describir el contenido que revela. Evita etiquetas genéricas como “Más información”.

Código + resultado

## Ejemplo aplicado de Accordion
El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

HTML

```html
<div class="q-accordion rounded-12">
  <details class="q-accordion__item" open>
    <summary class="q-accordion__trigger">
      ¿Necesita JavaScript?
    </summary>
    <div class="q-accordion__panel">
      No. Utiliza
      <code>
        details
      </code>
      y
      <code>
        summary
      </code>
      nativos.
    </div>
  </details>
  <details class="q-accordion__item">
    <summary class="q-accordion__trigger">
      ¿Es responsive?
    </summary>
    <div class="q-accordion__panel">
      Sí. Su ancho se adapta al contenedor.
    </div>
  </details>
  <details class="q-accordion__item">
    <summary class="q-accordion__trigger">
      ¿Acepta utilidades?
    </summary>
    <div class="q-accordion__panel">
      Sí. Puedes ajustar spacing, bordes y color con Quickly.
    </div>
  </details>
</div>
```

Resultado aplicado   Accordion · primera sección abierta

Componente real
¿Necesita JavaScript?  No. Utiliza `details` y `summary` nativos.
¿Es responsive?  Sí. Su ancho se adapta al contenedor.
¿Acepta utilidades?  Sí. Puedes ajustar spacing, bordes y color con Quickly.

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

## Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

| Clase o atributo | Función | Uso recomendado |
| --- | --- | --- |
| .q-accordion | Raíz | Agrupa los elementos desplegables. |
| .q-accordion__item | Elemento | Unidad details independiente. |
| .q-accordion__trigger | Activador | Summary que abre o cierra el contenido. |
| .q-accordion__panel | Panel | Contenido expandible. |
| [open] | Estado abierto | Expande el panel y rota el indicador. |
| .bc-{token} | Color de acento | Sincroniza el título abierto y su flecha. |
| .rounded-12 | Radio opcional | Define el redondeado exterior mediante una utilidad. |

Recomendaciones

## Buenas prácticas de Accordion

01
### No ocultes lo esencial
Mantén visible la información necesaria para completar una tarea.

02
### Orden lógico
Conserva una secuencia comprensible incluso con todo cerrado.

03
### Contenido moderado
Evita paneles tan extensos que oculten la siguiente sección.

04
### Nativo primero
No reemplaces details si no necesitas un comportamiento especial.