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-Accordions um einige sehr hilfreiche Funktionen erweitert.
Übrigens gibt es noch einen obendrauf: Die Accordions lassen sich auch mit einem Button versehen, welcher alle Akkordeon-Tabs gleichzeitig öffnet oder schliesst. Wie das geht, erfahren Sie im Beitrag «Gesamtes Akkordeon-Modul im Divi-Theme per Button öffnen oder schliessen».
Werbung
Werbung
