Divi-Accordions per Klick öffnen und schliessen

10. Januar 2021 | Divi-Theme, functions.php, WordPress

Im Divi-Theme gibt es ein hübsches Accordion-Modul, mit welchem sich die Inhalte einer Website sehr schön strukturieren lassen. Jedoch hat das Modul in der Grundausstattung zwei entscheidende Nachteile: Der erste Accordion-Content ist beim Seitenaufruf immer geöffnet und die Accordions lassen sich nur schliessen, indem ein anderes geöffnet wird. Ein kleiner Hack schafft Abhilfe.

Der Trick ist eigentlich zweiteilig; beide Funktionen können also auch einzeln und unabhängig voneinander angewendet werden.

Trick 1: Divi-Accordions ungeöffnet starten

Dieser Part ist im Handumdrehen erledigt. Fügen Sie den folgenden Code unter Divi Theme Options/Integration ins Feld «Add Code to the <head> of your blog»:

<script>
jQuery(function($){
    $('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');

    $('.et_pb_accordion .et_pb_toggle').click(function() {
      $this = $(this);
      setTimeout(function(){
         $this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');
      },700);
    });
});
</script>

Damit ist dieser Teil schon mal vom Tisch. Die Accordions starten nun standardmässig geschlossen. Wahlweise geht es weiter.

Trick 2: Divi-Accordions schliessbar machen

Damit die offenen Accordions geschlossen werden können, bedarf es eines Schliessbuttons im Kopffeld des Accordions. Diesen fügen Sie ein, indem Sie das folgende Script unter unter Divi Theme Options/Integration ins Feld «Add Code to the <head> of your blog» einfügen:

<script>
jQuery(function($){
  $('.et_pb_toggle_title').click(function(){
    var $toggle = $(this).closest('.et_pb_toggle');
    if (!$toggle.hasClass('et_pb_accordion_toggling')) {
      var $accordion = $toggle.closest('.et_pb_accordion');
      if ($toggle.hasClass('et_pb_toggle_open')) {
        $accordion.addClass('et_pb_accordion_toggling');
        $toggle.find('.et_pb_toggle_content').slideToggle(700, function() { 
          $toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close'); 
					
        });
      }
      setTimeout(function(){ 
        $accordion.removeClass('et_pb_accordion_toggling'); 
      }, 750);
    }
  });
});
</script>

Diesen Code können Sie nun noch stylen. Fügen Sie den nachfolgenden Code in Ihr CSS-Stylesheet (via Design/Customizer/Zusätzliches CSS) ein:

.et_pb_toggle_open .et_pb_toggle_title:before {
display: block !important;
font-family: 'Font Awesome 5 Free';
content: "e04f";
}

Ihr Schliessbutton ist nun gestylt. Wenn Sie mögen, geht aber noch mehr

Option: Zweiter Schliessbutton am Ende des Accordions anzeigen

Wenn Ihr Accordion-Inhalt sehr viel Text umfasst, kann ein zweiter Schliessbutton von Nutzen sein. Vorteil: User müssen nicht wieder hoch scrollen, um ein Accordion zu schliessen.

Sie erweitern Ihre Accordions mit dem folgenden Code, den Sie unter Divi Theme Options/Integration ins Feld «Add Code to the <head> of your blog»:einfügen:

<script>
	jQuery(function($){
		$('.et_pb_toggle_title').each(function(){
			var $title = $(this);
			var $closebar = $title.clone(true).addClass('db_pb_toggle_close2').html(' ');
			$title.closest('.et_pb_toggle').append($closebar);
		});
	});
</script>

Auch diesen zusätzlichen, unteren Schliessbutton können Sie nun noch stylen. Fügen Sie den folgenden Code wiederum unter Design/Customizer/Zusätzliches CSS ein:

.et_pb_toggle_close .db_pb_toggle_close2 {
display: none; 
}
.db_pb_toggle_close2 { 
margin-top: 10px; 
visibility: hidden;
}
.db_pb_toggle_close2:before {
visibility: visible;
}

Damit haben Sie die Divi-Accprdions um einige sehr hilfreiche Funktionen erweitert.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This