In Divi-Projekten ist es häufig nötig, Elemente per Klick ein- und auszublenden – etwa für FAQ-Sektionen, „Mehr anzeigen"-Buttons oder interaktive Tab-Bereiche. Standardmäßig bietet Divi keinen dedizierten Toggle-Mechanismus dafür, aber mit wenigen Zeilen CSS und JavaScript lässt sich das Verhalten sauber nachrüsten. Dieser Knowledge-Artikel zeigt den konkreten Weg – inklusive der CSS-Klassen, die der Divi-Editor anbietet, und ohne zusätzliches Plugin.
1. Button erstellen per Code
Füge eine Schaltfläche mit dem Klassennamen „togglebtn“ wie in einem Screenshot hinzu
<button class="togglebtn et_pb_button et_pb_button_2 et_pb_bg_layout_dark">Button Text</button>2. CSS-Klasse in das auzublendene Element einfügen
Das Element welches ausgeblendet werden soll braucht folgenden Klasse:
toggle-element3. Zusätzliches Codemodul mit der Java-Script Funktion
Fügt zusätzlich ein Code-Element ein um die Java-Script Funktion zu ermöglichen:
<script>
jQuery(document).ready(function($) {
$ (".togglebtn").click(function () {
$(".toggle-element").toggle(400);
});
});
</script>
Verwandte Artikel
Mehr Divi- und WordPress-Tutorials findest du in unserer Knowledgebase, oder frag uns direkt nach Unterstützung in der Webentwicklung.
Häufige Anwendungsfälle
Das Toggle-Pattern ist auf sehr vielen modernen Websites im Einsatz – hier die häufigsten Szenarien:
FAQ-Sektion
Fragen ausklappen, andere ausgeblendet lassen. Hält die Seite übersichtlich.
„Mehr anzeigen"-Button
Texte zunächst kürzen, Rest nach Klick einblenden.
Tab-Navigation
Inhaltsbereiche per Klick wechseln ohne Seitenreload.
Barrierefreiheit beachten
Für eine zugängliche Lösung setze auf dem Toggle-Button das Attribut aria-expanded="false" und wechsle es per JS auf true. So können auch Screenreader den Zustand erkennen.
Du brauchst professionelle Unterstützung bei WordPress oder Divi? OIT GmbH aus Osnabrück bietet WordPress-Webdesign und WordPress-Wartung für Ihr Unternehmen.
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.