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

Autor

Marius Marzian

Datum 04. Februar 2021

Kategorie SEO

Inhalt

1. Button erstellen per Code
2. CSS-Klasse in das auzublendene Element einfügen
3. Zusätzliches Codemodul mit der Java-Script Funktion

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>