Wie blende ich Elemente per Button ein und aus in Divi?

Erstelle einen Button mit einer CSS-Klasse als Trigger und das Zielelement mit einer CSS-ID. Per jQuery-Snippet: jQuery('.trigger').click(function(){ jQuery('#ziel').slideToggle(); }); im Code-Modul.

WordPress DIVI: Mit einem Button Elemente ein- und ausblenden

Marius Marzian • 04. Februar 2021 • 2 Min. Lesezeit

SEO-Experte

Marius Marzian

OIT GmbH

Profil ansehen

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-element

3. 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>

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.