32/Interacción y estado

Accordion / FAQ

Basado en details y summary: funciona sin JS. El JS agrega el modo de un solo elemento abierto y eventos.

Preguntas frecuentes

01¿Cuánto tarda un proyecto?

Entre cuatro y doce semanas, según el alcance. Entregamos avances cada una o dos semanas.

02¿El código es mío?

Sí. Entregamos el repositorio completo con documentación.

03¿Dan soporte después?

Sí, con planes mensuales y tiempos de respuesta claros.

HTML

<div class="cb-accordion" data-cb-accordion="single">
  <details class="cb-accordion__item" open>
    <summary class="cb-accordion__trigger"><span><span class="cb-accordion__num">01</span>¿Cuánto tarda un proyecto?</span><span class="cb-accordion__icon" aria-hidden="true"></span></summary>
    <div class="cb-accordion__content">Entre cuatro y doce semanas, según el alcance. Entregamos avances cada una o dos semanas.</div>
  </details>
  <details class="cb-accordion__item">
    <summary class="cb-accordion__trigger"><span><span class="cb-accordion__num">02</span>¿El código es mío?</span><span class="cb-accordion__icon" aria-hidden="true"></span></summary>
    <div class="cb-accordion__content">Sí. Entregamos el repositorio completo con documentación.</div>
  </details>
  <details class="cb-accordion__item">
    <summary class="cb-accordion__trigger"><span><span class="cb-accordion__num">03</span>¿Dan soporte después?</span><span class="cb-accordion__icon" aria-hidden="true"></span></summary>
    <div class="cb-accordion__content">Sí, con planes mensuales y tiempos de respuesta claros.</div>
  </details>
</div>

Clases y modificadores

Clase	Descripción
`.cb-accordion`	Contenedor con línea superior.
`.cb-accordion__item`	Cada `details`. La altura se anima en navegadores con `::details-content`.
`.cb-accordion__trigger`	El `summary`.
`.cb-accordion__num`, `.cb-accordion__icon`	Número opcional e icono +/−.
`.cb-accordion__content`	Contenido.

Atributos data-cb-*

Atributo	Descripción
`data-cb-accordion="single"`	Al abrir uno se cierran los demás. Sin valor, todos son independientes.

JavaScript

Evento	Cuándo se dispara
`cb:open` / `cb:close`	En cada `details` al abrirse o cerrarse.

Accesibilidad

details/summary ya son accesibles con teclado y lectores de pantalla.
El icono es decorativo (aria-hidden); el estado lo anuncia el navegador.