Blocco Fisarmonica
Sezioni espandibili per mantenere scorrevole un'email lunga — FAQ, dettagli dell'ordine, termini — senza costringere ogni destinatario a leggere tutto, che ne abbia bisogno o no.
Come funziona
L'email e la vista live ospitata usano deliberatamente due implementazioni diverse, non un unico albero di markup condiviso. Nella vista live, un vero browser, ogni elemento è un elemento nativo <details>/<summary>. È più accessibile di un trucco CSS: è azionabile da tastiera, porta un indicatore di apertura nativo e funziona con gli screen reader fin da subito, quindi non c'è motivo di rinunciarvi solo per condividere codice con il motore di rendering dell'email.
Nell'HTML inviato via email, il supporto a <details> è incoerente tra i client di posta, quindi ogni elemento usa invece la stessa tecnica :checked con casella-di-spunta-nascosta-più-etichetta che usano i blocchi carosello e gratta e vinci. Si tratta di una casella di spunta nascosta, un <label> stilizzato come titolo cliccabile, e un <div> di contenuto che è display:none finché la sua casella non viene selezionata. A quel punto una regola #item-id:checked ~ .acc-content{display:block} lo rivela. Ogni elemento si attiva/disattiva in modo indipendente; non c'è un comportamento "solo uno aperto alla volta".
Ovunque quella tecnica CSS non venga rispettata (il motore Word di Outlook, o un client che rimuove i blocchi <style>), il fallback non è un link altrove — è il predefinito più sicuro possibile: ogni elemento viene renderizzato già espanso. Nulla viene mai nascosto dietro un gesto che un client non può eseguire, così un destinatario su un client ridotto all'osso vede subito la FAQ completa o i dettagli dell'ordine completi, solo senza la possibilità di comprimere/espandere. Questo rispecchia lo stesso pattern "predefinito sicuro" che usa il blocco gratta e vinci per la sua rivelazione del premio.
Campi configurabili:
- Colore di sfondo, padding, bordo (larghezza/stile/colore) e raggio del bordo — si applicano alla card esterna della fisarmonica, condivisa da tutti gli elementi.
Ogni elemento fisarmonica (un nodo figlio, aggiunto/riordinato in modo indipendente) porta con sé:
- Titolo — il testo dell'intestazione sempre visibile, toccabile per espandere/comprimere.
- Contenuto — il testo del corpo rivelato sottostante, renderizzato con le interruzioni di riga preservate.
- Colore titolo/dimensione font titolo e colore contenuto/dimensione font contenuto indipendenti per elemento, così una voce di avviso o una FAQ evidenziata può distinguersi dalle vicine.
Una fisarmonica è puro contenuto, come un blocco testo o immagine — espandere un elemento non è un evento di interazione. Nulla su quali elementi un destinatario ha aperto viene registrato, e il blocco non compare mai nella dashboard delle risposte, nell'esportazione CSV, o in un webhook di progetto.
Esempi
Subject
Your order questions, answered
Una sezione FAQ in fondo a un'email di lancio prodotto o di onboarding mantiene breve il messaggio principale pur continuando a rispondere alle cinque domande che tutti fanno. I destinatari che non hanno bisogno del dettaglio non lo vedono mai espanso, e quelli che ne hanno bisogno ottengono comunque un fallback completamente espanso se il loro client non riesce a comprimerlo fin dall'inizio. Un'email di conferma ordine può racchiudere i dettagli di spedizione, la politica dei resi e il prezzo articolo per articolo in tre sezioni compresse invece che in un muro di testo. Un riepilogo newsletter può usare un elemento per ogni storia, con il titolo come titolo e un riassunto di due frasi come contenuto, permettendo ai destinatari di scorrere i titoli ed espandere solo ciò che li interessa.
Come appare il fallback statico
<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 casella di spunta nascosta e la sua regola di stile :checked sono omesse qui perché racchiuse in un livello solo cinetico — in un client che le salta, .acc-content non ha alcuna regola che lo nasconde, quindi viene renderizzato espanso di default esattamente come mostrato.