Acordeón

Bloques que se pliegan y se despliegan, hechos sobre <details> y <summary>. Lo nativo ya resuelve teclado, semántica y estado, y abre y cierra antes de que cargue el JavaScript. El componente entra solo donde lo nativo no llega: animar.

Ejemplos

El mismo <details>, con un atributo o una clase de más.

Cómo usar

El HTML es el de siempre. Los <details> deben ser hijos directos del elemento marcado, y el open escrito en la plantilla indica cuáles nacen abiertos.

<div class="tuc-accordion" data-tuc-accordion data-single="true">
  <details open>
    <summary>Proyectos</summary>
    <p>Listar, crear y seguir inspecciones.</p>
  </details>
  <details>
    <summary>Informes</summary>
    <p>Mensual, por equipo y por período.</p>
  </details>
</div>

El script añade lo que falta: la clase tuc-accordion en el contenedor, tuc-accordion__item en cada <details>, tuc-accordion__trigger en el <summary>, la flecha, y envuelve el resto del contenido en tuc-accordion__body y tuc-accordion__content. Hasta entonces, el CSS ya dibuja el acordeón en crudo con las mismas líneas y el mismo espaciado, para que nada salte cuando llega el JavaScript.

En la plantilla de Django

<div class="tuc-accordion" data-tuc-accordion data-single="true">
  {% for question in questions %}
    <details{% if forloop.first %} open{% endif %}>
      <summary>{{ question.title }}</summary>
      {{ question.answer|linebreaks }}
    </details>
  {% endfor %}
</div>

En JavaScript

const faq = new Tucano.Accordion('#faq', { single: true });

const item = document.querySelector('#faq > details:nth-child(2)');
faq.open(item);      // con single, pliega los demás
faq.close(item);     // anima y solo entonces quita el open
faq.items;           // los <details>, en orden
faq.destroy();

Cómo anima

La altura del contenido es auto, y auto no tiene transición. Al cerrar, además, el navegador oculta el contenido en el mismo fotograma en que cae el open.

La apertura es CSS puro: el cuerpo es un grid de una fila, y la fila anima de 0fr a 1fr — interpolable, sin medir nada en JavaScript ni fijar altura. El cierre necesita script: el clic en el <summary> se intercepta, el elemento recibe is-closing y sigue abierto mientras la fila vuelve a 0fr, y solo al final cae el open. Reabrir en mitad del cierre cancela la salida y sigue desde el punto en que estaba la altura.

La primera apertura de un <details> suele atascarse, porque el navegador todavía no midió lo que estaba cerrado. Al iniciar, el componente abre y cierra cada elemento en el mismo bloque síncrono — no llega a pintarse nada — solo para adelantar ese cálculo. Con prefers-reduced-motion, la transición baja a 1 ms.

Teclado y accesibilidad

Todo aquí viene del <details>: el <summary> es enfocable, y el lector de pantalla anuncia plegado y desplegado sin ningún aria-* nuestro.

La flecha es dibujo y lleva aria-hidden, para no leerse junto con el título. Un <details> cerrado no tiene nada enfocable en el recorrido del Tab: el campo de un elemento plegado no se alcanza hasta que alguien lo abre.

API

Generada a partir del código en cada build — si algo no está aquí, no existe.

Opciones

Las notas de esta tabla salen de los comentarios del código fuente, que están escritos en portugués.