Divi 5 Accordion & Toggle anpassen: alle zu, Icons stylen, FAQ-Schema

Zusammenfassung: Zwei Dinge vorweg, damit du keine Zeit verlierst: Das komplette Styling — Icon, Farben, Rahmen, Abstände — stellst du in Divi 5 direkt im Modul ein (Tab Design), dafür brauchst du kein CSS. Wir haben das im Builder verifiziert. Code brauchst du nur für zwei Verhaltensweisen, die Divi bewusst nicht anbietet: alle Einträge geschlossen starten und einen offenen Eintrag per Klick wieder schließen. Genau dafür liefert dieser Artikel das getestete JavaScript-Snippet — plus die Vorlage, wie du dein FAQ-Akkordeon mit FAQPage-Schema für Google auszeichnest.

Das Standard-Verhalten in Divi 5 (nachgemessen)

Wir haben das Akkordeon-Modul auf einer frischen Divi-5.8-Installation getestet. Drei Dinge fallen auf:

1. Der erste Eintrag ist immer offen. Das Modul rendert den ersten Toggle mit der Klasse et_pb_toggle_open — eine Einstellung, um alle Einträge geschlossen zu starten, gibt es auch in Divi 5 nicht.
2. Ein offener Eintrag lässt sich nicht schließen. Klickst du auf einen anderen Eintrag, wechselt das Akkordeon korrekt. Klickst du aber auf den bereits offenen Titel, passiert: nichts. Divi erzwingt, dass immer genau ein Eintrag offen bleibt.
3. Die CSS-Klassen sind dieselben wie in Divi 4: .et_pb_accordion, .et_pb_toggle, .et_pb_toggle_open / .et_pb_toggle_close, .et_pb_toggle_title und .et_pb_toggle_content. Bestehende Snippets bleiben nutzbar.

Für ein FAQ ist das selten gewollt: Besucher sollen die Fragen zuerst scannen können, statt mit einer aufgeklappten Antwort zu starten.

Die Lösung: alle Einträge zu — und offene wieder schließbar

Ein JavaScript-Snippet löst beide Probleme zugleich. Es schließt beim Laden alle Einträge und erlaubt zusätzlich, einen offenen Eintrag per Klick wieder zu schließen.

Wohin damit: WordPress-Adminbereich → Divi → Theme-Optionen → Integration → Feld „Code zum head hinzufügen” (inklusive der <script>-Tags). Alternativ ins Child-Theme.

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Teil A: Beim Laden alle Akkordeon-Eintraege schliessen
  document.querySelectorAll('.et_pb_accordion .et_pb_toggle_open').forEach(function (t) {
    t.classList.remove('et_pb_toggle_open');
    t.classList.add('et_pb_toggle_close');
    var c = t.querySelector('.et_pb_toggle_content');
    if (c) c.style.display = 'none';
  });

  // Teil B: Offener Eintrag laesst sich per Klick wieder schliessen
  document.querySelectorAll('.et_pb_accordion .et_pb_toggle_title').forEach(function (title) {
    title.addEventListener('click', function () {
      var t = title.closest('.et_pb_toggle');
      if (t.classList.contains('et_pb_toggle_open')) {
        setTimeout(function () {
          t.classList.remove('et_pb_toggle_open');
          t.classList.add('et_pb_toggle_close');
          var c = t.querySelector('.et_pb_toggle_content');
          if (c) c.style.display = 'none';
        }, 50);
      }
    });
  });
});
</script>

Das setTimeout in Teil B ist kein Zufall: Divis eigener Klick-Handler läuft zuerst und würde den Eintrag sonst sofort wieder öffnen. Die 50 Millisekunden Verzögerung lassen Divi den Vortritt — danach schließt unser Code den Eintrag sauber. Ohne diesen Kniff funktioniert das Schließen nicht zuverlässig; genau so haben wir es getestet.

Styling? Das meiste stellst du direkt im Modul ein

Wichtige Klarstellung — und hier hat sich in Divi 5 einiges getan: Das optische Styling des Akkordeons gehört nicht in ein CSS-Snippet, sondern direkt in die Modul-Einstellungen. Wir haben den Design-Tab des Akkordeon-Moduls im Divi-5.8-Builder Punkt für Punkt geprüft — Farben, Icon, Rahmen und Abstände sind alle nativ einstellbar, ganz ohne Code.

Öffne das Akkordeon-Modul → Tab Design. Dort findest du eigene Einstellungsgruppen für:

• Icon — Farbe, Größe und ein eigenes Symbol (statt des Standard-Plus/Pfeils). Das Auf/Zu-Zeichen stammt aus Divis Icon-Font (ETmodules); du musst es nicht per CSS anfassen.
• Umschalter — Hintergrundfarbe und Abstände der Toggle-Leisten.
• Titeltext — Schrift, Größe und Farbe des Titels im geöffneten Zustand.
• Text Für Geschlossenen Titel — eine separate Farbe/Schrift für den geschlossenen Zustand. Genau damit hebst du den offenen Eintrag farblich hervor — ohne die CSS-Regel, die man aus Divi-4-Zeiten kennt.
• Rand — Rahmen und Eckenradius (der „Karten-Look”).
• Zwischenraum — Abstände zwischen und innerhalb der Einträge.
• Layout — neu in Divi 5: Das Akkordeon nutzt jetzt ein Flex-Layout mit einstellbarem horizontalem und vertikalem Abstand.

Merke dir die Regel: Für Farben, Icon, Rahmen und Abstände brauchst du kein CSS. Das ist auch der Grund, warum dieser Artikel ausschließlich beim Verhalten ansetzt (alle zu / wieder schließbar) — genau dort, und nur dort, fehlt Divi eine Einstellung.

Wann lohnt sich beim Akkordeon überhaupt noch CSS? Nur für Effekte, die das Modul nicht anbietet — etwa eine sanfte Transition auf das Icon oder ein Pseudo-Element. Ein Beispiel für so einen Rest-Fall:

/* Optional: sanfte Icon-Drehung beim Öffnen (gibt es nicht als Modul-Option) */
.et_pb_toggle_title::before {
  transition: transform 0.25s ease;
}
.et_pb_toggle_open .et_pb_toggle_title::before {
  transform: rotate(180deg);
}

Für alles andere gilt: erst im Modul-Design-Tab suchen, Code nur da, wo es wirklich keine Einstellung gibt.

Nur wenn du doch mal zu CSS greifst (für die genannten Ausnahmefälle), brauchst du in Divi 5 fast immer !important — der Builder setzt seine Modul-Stile mit hoher Priorität. Denselben Effekt beschreiben wir im Mobile-Menü-Tutorial.

Akkordeon oder Toggle — welches Modul wofür?

Divi bringt zwei verwandte Module mit, die oft verwechselt werden:

• Akkordeon: Mehrere Einträge in einem Modul, immer genau einer offen (ohne unser Snippet). Gut für FAQs und Schritt-Abfolgen.
• Toggle: Ein einzelner Klapp-Eintrag pro Modul, unabhängig von allen anderen — mehrere Toggles können gleichzeitig offen oder alle geschlossen sein, und der Startzustand (offen/zu) ist pro Toggle einstellbar.

Wer nur „alle zu beim Start” braucht und auf das automatische Schließen der Nachbarn verzichten kann, kommt also auch ganz ohne Code aus: mehrere Toggle-Module untereinander statt eines Akkordeons. Der Preis ist mehr Pflegeaufwand (jedes Toggle ist ein eigenes Modul) und kein Auto-Schließen.

FAQ-Akkordeon mit Schema für Google auszeichnen

Ein FAQ-Akkordeon ist der Klassiker — und mit FAQPage-Schema kann Google die Fragen direkt in den Suchergebnissen anzeigen. Divi erzeugt dieses Markup nicht automatisch. Die einfachste Lösung: ein Code-Modul auf derselben Seite mit dem passenden JSON-LD, Fragen und Antworten identisch zum Akkordeon-Inhalt:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Was kostet eine Kickbox-Mitgliedschaft?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Die Mitgliedschaft kostet 39 Euro im Monat. Ein Probetraining ist kostenlos."
      }
    },
    {
      "@type": "Question",
      "name": "Brauche ich Vorkenntnisse für das Probetraining?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Nein. Unsere Kurse sind für alle Niveaus offen."
      }
    }
  ]
}
</script>

Wichtig: Die Texte im Schema müssen inhaltlich dem entsprechen, was sichtbar auf der Seite steht — sonst riskierst du eine Abstrafung wegen irreführender strukturierter Daten. Nach dem Einbau prüfst du das Markup mit dem Rich-Results-Test von Google.

Noch ein Detail fürs saubere HTML: Divi rendert Akkordeon-Titel als <h5>. Prüfe, ob das in deine Überschriften-Hierarchie passt — in den Modul-Einstellungen (Design → Titel-Text) lässt sich die Überschriften-Ebene ändern.

Häufige Fehler

Das Snippet greift, aber die Einträge springen wieder auf

Fast immer fehlt das setTimeout aus Teil B oder es wurde entfernt. Divis eigener Handler läuft nach deinem Code und macht das Schließen rückgängig. Die Verzögerung von 50 ms löst genau das.

Nach dem Einbau ist gar kein Eintrag mehr öffnenbar

Dann wurde versehentlich auch der Öffnen-Klick abgefangen (z. B. mit preventDefault oder stopPropagation im Handler). Unser Snippet lässt Divis Öffnen-Logik bewusst unangetastet — nur das Schließen wird ergänzt.

Die CSS-Anpassungen wirken nicht

Wie überall in Divi 5: !important ergänzen, Caches leeren (Browser, Caching-Plugin und Divi → Theme-Optionen → Builder → Erweitert → Statische CSS-Dateigenerierung), dann in einem privaten Fenster testen.

Alle unsere Divi-5-Anleitungen und Problemlösungen an einem Ort: zum Divi-5-Tutorial-Hub.

Häufige Fragen

Muss ich das Akkordeon per CSS stylen — oder geht das im Modul?

Das Styling geht komplett im Modul. Im Tab Design stellst du Icon-Farbe und -Größe, die Titelfarbe für den offenen und den geschlossenen Zustand, Rahmen/Radius (Karten-Look) und alle Abstände direkt ein — dafür brauchst du kein CSS. Wir haben das im Divi-5.8-Builder Gruppe für Gruppe nachgeprüft. CSS lohnt sich nur noch für Effekte, die das Modul nicht anbietet (z. B. eine Transition auf das Icon). Der Code in diesem Artikel betrifft deshalb bewusst nur das Verhalten — alle Einträge geschlossen starten und einen offenen Eintrag wieder schließbar machen. Genau dafür fehlt Divi eine Einstellung.

Kann ich das Divi-Akkordeon ohne Code geschlossen starten lassen?

Im Akkordeon-Modul selbst nicht — auch in Divi 5 fehlt diese Einstellung. Ohne Code bleibt der Umweg über einzelne Toggle-Module (dort ist der Startzustand einstellbar) oder ein Plugin. Mit dem Snippet aus diesem Artikel sind es zwei Minuten Aufwand.

Warum schließt sich mein offener Akkordeon-Eintrag nicht per Klick?

Das ist Standard-Verhalten: Divi erzwingt, dass immer genau ein Eintrag geöffnet bleibt. Ein Klick auf den offenen Titel bewirkt nichts. Teil B unseres Snippets ergänzt das Schließen — inklusive der nötigen Verzögerung, damit Divis eigener Handler nicht dazwischenfunkt.

Funktionieren meine Divi-4-Akkordeon-Snippets in Divi 5?

Weitgehend ja. Die Klassen (et_pb_toggle_open, et_pb_toggle_close, et_pb_toggle_title, et_pb_toggle_content) sind unverändert — wir haben es am gerenderten Quelltext einer Divi-5.8-Seite geprüft. Bei Styling-Regeln solltest du !important ergänzen, weil Divi 5 eigene Stile mit höherer Priorität setzt.

Erzeugt Divi automatisch FAQ-Schema für Akkordeons?

Nein. Divi zeichnet Akkordeon-Inhalte nicht als FAQPage aus. Das JSON-LD ergänzt du selbst — am einfachsten über ein Code-Modul auf derselben Seite (Vorlage oben im Artikel). Danach mit dem Rich-Results-Test prüfen.

Sollte ich Akkordeon oder einzelne Toggles verwenden?

Fürs FAQ mit vielen Fragen: Akkordeon plus unser Snippet (kompakt, automatisches Schließen, ein Modul zu pflegen). Für zwei, drei unabhängige Klapp-Elemente, die auch gleichzeitig offen sein dürfen: einzelne Toggle-Module — dort brauchst du keinen Code für den geschlossenen Start.

Quellen

• Eigene Tests auf einer Divi-5.8-Installation (Juli 2026) — Verhalten, Snippets und Screenshots stammen aus dieser Umgebung
• Divi Accordion Module — Elegant Themes Dokumentation
• FAQPage Structured Data — Google Search Central