Bloc Accordéon
Des sections dépliables pour garder un long email facile à parcourir — FAQ, détails de commande, conditions — sans forcer chaque destinataire à tout lire, qu'il en ait besoin ou non.
Comment ça fonctionne
Le courrier et la vue en direct hébergée utilisent délibérément deux implémentations différentes, pas un arbre de balisage partagé. Dans la vue en direct, un vrai navigateur, chaque élément est un élément natif <details>/<summary>. C'est plus accessible qu'une astuce CSS : c'est utilisable au clavier, ça porte un marqueur de divulgation natif, et ça fonctionne avec les lecteurs d'écran d'emblée, donc il n'y a aucune raison d'y renoncer juste pour partager du code avec le moteur de rendu du courrier.
Dans le HTML envoyé, la prise en charge de <details> est incohérente selon les clients de messagerie, donc chaque élément utilise à la place la même technique :checked de case à cocher cachée plus libellé qu'utilisent les blocs carrousel et carte à gratter. C'est une case à cocher cachée, un <label> stylé comme le titre cliquable, et un <div> de contenu qui est display:none jusqu'à ce que sa case soit cochée. À ce moment-là, une règle #item-id:checked ~ .acc-content{display:block} le révèle. Chaque élément bascule indépendamment ; il n'y a pas de comportement « un seul ouvert à la fois ».
Partout où cette technique CSS n'est pas respectée (le moteur Word d'Outlook, ou un client qui retire les blocs <style>), l'alternative n'est pas un lien ailleurs — c'est la valeur par défaut la plus sûre possible : chaque élément se rend déjà déplié. Rien n'est jamais caché derrière un geste qu'un client ne peut pas effectuer, donc un destinataire sur un client dépouillé voit la FAQ complète ou les détails de commande complets d'emblée, simplement sans l'affordance de pliage/dépliage. Cela reflète le même motif de « valeur de repli sûre » qu'utilise le bloc carte à gratter pour la révélation de son lot.
Champs configurables :
- Couleur de fond, marge intérieure, bordure (largeur/style/couleur) et rayon de bordure — s'appliquent à la carte extérieure de l'accordéon, partagée entre tous les éléments.
Chaque élément d'accordéon (un nœud enfant, ajouté/réorganisé indépendamment) porte :
- Titre — le texte d'en-tête toujours visible, touchable pour déplier/replier.
- Contenu — le texte de corps révélé en dessous, rendu avec les sauts de ligne préservés.
- Des surcharges indépendantes de couleur de titre/taille de police de titre et de couleur de contenu/taille de police de contenu par élément, afin qu'un avertissement ou une entrée de FAQ mise en avant puisse se démarquer de ses voisines.
Un accordéon est du contenu pur, comme un bloc texte ou image — déplier un élément n'est pas un événement d'interaction. Rien n'est enregistré sur les éléments qu'un destinataire a ouverts, et le bloc n'apparaît jamais dans le tableau de bord des réponses, l'export CSV, ou un webhook de projet.
Exemples
Subject
Your order questions, answered
Une section FAQ en bas d'un email de lancement de produit ou d'intégration garde le message principal court tout en répondant aux cinq questions que tout le monde pose. Les destinataires qui n'ont pas besoin du détail ne le voient jamais déplié, et ceux qui en ont besoin obtiennent quand même une alternative entièrement dépliée si leur client ne peut pas la replier au départ. Un email de confirmation de commande peut regrouper les détails d'expédition, la politique de retour, et le prix détaillé en trois sections repliées plutôt qu'un mur de texte. Un récapitulatif d'infolettre peut utiliser un élément par article, avec le titre comme intitulé et un résumé de deux phrases comme contenu, laissant les destinataires parcourir les titres et ne déplier que ce qui les intéresse.
À quoi ressemble l'alternative statique
<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 case à cocher cachée et sa règle de style :checked sont omises ici puisqu'elles sont enveloppées dans un niveau cinétique uniquement — dans un client qui les ignore, .acc-content n'a aucune règle la cachant, donc elle se rend dépliée par défaut exactement comme montré.