Akkordeon-Block
Ausklappbare Abschnitte, um eine lange E-Mail überschaubar zu halten — FAQs, Bestelldetails, Bedingungen — ohne jeden Empfänger zu zwingen, alles zu lesen, egal ob er es braucht oder nicht.
Wie es funktioniert
Die E-Mail und die gehostete Live-Ansicht nutzen bewusst zwei unterschiedliche Implementierungen, nicht einen gemeinsamen Markup-Baum. In der Live-Ansicht, einem echten Browser, ist jedes Element ein natives <details>/<summary>-Element. Das ist zugänglicher als ein CSS-Trick: Es ist per Tastatur bedienbar, trägt eine native Aufklapp-Markierung und funktioniert von Haus aus mit Screenreadern, sodass es keinen Grund gibt, darauf zu verzichten, nur um Code mit dem E-Mail-Renderer zu teilen.
Im gemailten HTML ist die <details>-Unterstützung über E-Mail-Clients hinweg inkonsistent, daher nutzt jedes Element stattdessen dieselbe Technik aus versteckter Checkbox plus Label mit :checked, die auch die Blöcke Karussell und Rubbelkarte verwenden. Das ist eine versteckte Checkbox, ein als klickbarer Titel gestyltes <label> und ein Inhalts-<div>, das display:none ist, bis seine Checkbox angehakt wird. In dem Moment legt eine Regel #item-id:checked ~ .acc-content{display:block} es offen. Jedes Element schaltet unabhängig um; es gibt kein „nur eines gleichzeitig geöffnet“-Verhalten.
Überall dort, wo diese CSS-Technik nicht beachtet wird (Outlooks Word-Engine oder ein Client, der <style>-Blöcke entfernt), ist der Fallback kein Link anderswo — es ist der sicherstmögliche Standardzustand: jedes Element wird bereits ausgeklappt gerendert. Nichts wird jemals hinter einer Geste versteckt, die ein Client nicht ausführen kann, sodass ein Empfänger in einem abgespeckten Client die vollständige FAQ oder die vollständigen Bestelldetails direkt sieht, nur ohne die Auf-/Zuklapp-Funktion. Das spiegelt dasselbe „sicherer Standardzustand“-Muster, das der Rubbelkarten-Block für seine Preisenthüllung nutzt.
Konfigurierbare Felder:
- Hintergrundfarbe, Innenabstand, Rahmen (Breite/Stil/Farbe) und Rahmenradius — gelten für die äußere Karte des Akkordeons, gemeinsam über alle Elemente hinweg.
Jedes Akkordeon-Element (ein untergeordneter Knoten, unabhängig hinzufügbar/neu anordenbar) trägt:
- Titel — den immer sichtbaren Überschriftentext, antippbar zum Auf-/Zuklappen.
- Inhalt — den darunter offengelegten Textkörper, gerendert mit erhaltenen Zeilenumbrüchen.
- Unabhängige Titelfarbe/Titel-Schriftgröße und Inhaltsfarbe/Inhalts-Schriftgröße pro Element, sodass eine Warnung oder ein hervorgehobener FAQ-Eintrag sich von seinen Nachbarn abheben kann.
Ein Akkordeon ist reiner Inhalt, wie ein Text- oder Bild-Block — das Ausklappen eines Elements ist kein Interaktionsereignis. Es wird nicht erfasst, welche Elemente ein Empfänger geöffnet hat, und der Block erscheint nie im Antworten-Dashboard, im CSV-Export oder in einem Projekt-Webhook.
Beispiele
Subject
Your order questions, answered
Ein FAQ-Abschnitt am Ende einer Produkteinführungs- oder Onboarding-E-Mail hält die Kernbotschaft kurz und beantwortet dennoch die fünf Fragen, die jeder stellt. Empfänger, die die Details nicht brauchen, sehen sie nie ausgeklappt, und Empfänger, die sie brauchen, erhalten trotzdem einen vollständig ausgeklappten Fallback, falls ihr Client sie von vornherein nicht einklappen kann. Eine Bestellbestätigungs-E-Mail kann Versanddetails, Rückgaberichtlinie und aufgeschlüsselte Preise in drei eingeklappte Abschnitte falten statt in eine Textwand. Ein Newsletter-Rückblick kann ein Element pro Story nutzen, mit der Schlagzeile als Titel und einer Zwei-Satz-Zusammenfassung als Inhalt, sodass Empfänger Schlagzeilen überfliegen und nur das ausklappen können, was sie interessiert.
So sieht der statische Fallback aus
<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>
Die versteckte Checkbox und ihre :checked-Stilregel sind hier weggelassen, da sie in eine rein kinetische Ebene eingebettet sind — in einem Client, der sie überspringt, hat .acc-content keine verbergende Regel, sodass es genau wie gezeigt standardmäßig ausgeklappt gerendert wird.