Bloque de acordeón
Secciones expandibles para mantener escaneable un correo largo — preguntas frecuentes, detalles de pedidos, términos — sin obligar a cada destinatario a leer todo, lo necesite o no.
Cómo funciona
El correo y la vista en vivo alojada usan deliberadamente dos implementaciones distintas, no un árbol de marcado compartido. En la vista en vivo, un navegador real, cada elemento es un elemento nativo <details>/<summary>. Eso es más accesible que un truco de CSS: se puede operar con teclado, lleva un marcador de divulgación nativo, y funciona con lectores de pantalla de forma inmediata, así que no hay razón para renunciar a eso solo para compartir código con el renderizador de correo.
En el HTML enviado, el soporte de <details> es inconsistente entre clientes de correo, así que cada elemento usa en su lugar la misma técnica de casilla oculta más etiqueta :checked que usan los bloques de carrusel y rasca y gana. Eso es una casilla de verificación oculta, una <label> con estilo de título clicable, y un <div> de contenido que es display:none hasta que se marca su casilla. En ese momento una regla #item-id:checked ~ .acc-content{display:block} lo revela. Cada elemento se alterna de forma independiente; no hay comportamiento de "solo uno abierto a la vez".
Donde esa técnica de CSS no se respeta (el motor de Word de Outlook, o un cliente que elimina los bloques <style>), la alternativa no es un enlace a otro lugar — es la opción segura por defecto más simple: cada elemento se renderiza ya expandido. Nada queda nunca oculto detrás de un gesto que un cliente no puede realizar, así que un destinatario en un cliente reducido ve las preguntas frecuentes completas o los detalles de pedido completos por adelantado, solo que sin el mecanismo de colapsar/expandir. Esto refleja el mismo patrón de "opción segura por defecto" que usa el bloque de rasca y gana para su revelación de premio.
Campos configurables:
- Color de fondo, relleno, borde (ancho/estilo/color) y radio de borde — se aplican a la tarjeta exterior del acordeón, compartida entre todos los elementos.
Cada elemento del acordeón (un nodo hijo, agregado/reordenado de forma independiente) lleva:
- Título — el texto de encabezado siempre visible, tocable para expandir/contraer.
- Contenido — el texto del cuerpo revelado debajo, renderizado conservando los saltos de línea.
- Color de título/tamaño de fuente de título y color de contenido/tamaño de fuente de contenido independientes por elemento, así una advertencia o una entrada de preguntas frecuentes destacada puede resaltar frente a sus vecinas.
Un acordeón es contenido puro, como un bloque de texto o imagen — expandir un elemento no es un evento de interacción. No se registra nada sobre qué elementos abrió un destinatario, y el bloque nunca aparece en el panel de respuestas, la exportación CSV, ni un webhook de proyecto.
Ejemplos
Subject
Your order questions, answered
Una sección de preguntas frecuentes al final de un correo de lanzamiento de producto o incorporación mantiene corto el mensaje principal mientras sigue respondiendo las cinco preguntas que todos hacen. Los destinatarios que no necesitan el detalle nunca lo ven expandido, y los que sí lo necesitan igual obtienen una alternativa completamente expandida si su cliente no puede colapsarlo desde el principio. Un correo de confirmación de pedido puede plegar los detalles de envío, la política de devoluciones y el desglose de precios en tres secciones colapsadas en lugar de un muro de texto. Un resumen de boletín puede usar un elemento por historia, con el titular como título y un resumen de dos oraciones como contenido, dejando que los destinatarios ojeen los titulares y expandan solo lo que les interesa.
Cómo se ve la alternativa estática
<div style="border:1px solid #e5e7eb;border-radius:6px;padding:10px 14px;margin-bottom:8px" id="em-acc-1">
<label for="em-acc-1-t" style="display:block;margin:0;font-weight:600;font-size:15px;color:#111827;cursor:pointer">
Do you offer refunds?
</label>
<div class="acc-content" style="margin:8px 0 0;font-size:14px;color:#111827">
Yes — within 30 days of purchase, no questions asked.
</div>
</div>
La casilla oculta y su regla de estilo :checked se omiten aquí porque están envueltas en un nivel exclusivamente cinético — en un cliente que las omite, .acc-content no tiene ninguna regla que lo oculte, así que se renderiza expandido por defecto exactamente como se muestra.