Video Tutorial

In diesem Video beantworte ich eine Nutzerfrage.

Kann ich mit einem Divi-Button-Modul eine Aufklapp-Liste öffnen und schließen? Die Anwort ist JA! Man braucht dazu nur ein wenig JavaScript bzw. jQuery. Wichitg ist, das wir die Elemente (Button und Umschalter) mit IDs – (Eindeutigen Bezeichern) versehen, damit wir die Elemente auch gezielt ansprechen können. Den Code selber kann ich direkt auf der Seite oder auch über die Divi Theme Optionen -> Integration -> Header-Code einbinden.

Natürlich lässt sich dieses Prizip auch auf andere Elemente anwenden. Aucch lassen sich bestimmte Tabs im Akkordeon-Modul gezielt öffnen und schliessen.

Das Ergebnis

Das Umschalter Modul

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Code Snippet zum Tutorial Umschalter mit Button öffnen

<script>
jQuery( document ).ready(function($) {
  $("#button1").click(function(){
    $("#umschalt1 .et_pb_toggle_content").toggle();
    return false;  
		event.preventDefault();
    event.stopPropagation();
  });	
  
  $(".et_pb_toggle_title").click(function(){
    $(".et_pb_toggle_content").toggle(); 
		return false;  
		event.preventDefault();
    event.stopPropagation();
  });	
    //console.log( "Ready for Umschalter" );
});
</script>

Die Divi-Module

Standard Module

  • Accordion / Akkordeon
  • Audio / Audio
  • Bar Counter / Balkenzähler
  • Blog / Blog
  • Blurb / Informationstext
  • Button / Button
  • Call to Action / Handlungsaufruf
  • Code / Code
  • Comments / Kommentare 
  • Contact Form / Kontaktformular
  • Countdown Timer / Countdown-Timer
  • Divider / Teiler 
  • Email Optin / E-Mail-Optin
  • Filterable Portfolio / Filterbares Portfolio
  • Gallery / Galerie
  • Image / Bild 
  • Login / Login
  • Map / Karte
  • Menu / Menü
  • Number Counter / Zähler
  • Person / Person
  • Portfolio / Portfolio
  • Post Navigation / Beitragsnavigation
  • Post Slider / Post-Slider
  • Post Title / Posttitel
  • Pricing Tables / Preistabellen
  • Search / Suche
  • Shop / 
  • Sidebar / Seitenleiste
  • Slider / Slider
  • Social Media Follow / Social MEdia
  • Tabs / Registerkarte
  • Testimonial / Testimonials
  • Text / Text
  • Toggle / Umschalter
  • Video / Video
  • Video Slider / Video-Slider
  • Überschrift H1

Vollbreite Module

  • Fullwidth Code
  • Fullwidth Header
  • Fullwidth Image
  • Fullwidth Map
  • Fullwidth Menu
  • Fullwidth Portfolio
  • Fullwidth Post Slider
  • Fullwidth Slider

Shop Module

  • Woo Produktbeschreibung