Componentes · Interacción

Accordion (contenido expandible)

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.

Código + resultado

Ejemplo aplicado de Accordion

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

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

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

No ocultes lo esencial

Mantén visible la información necesaria para completar una tarea.

Orden lógico

Conserva una secuencia comprensible incluso con todo cerrado.

Contenido moderado

Evita paneles tan extensos que oculten la siguiente sección.

Nativo primero

No reemplaces details si no necesitas un comportamiento especial.