Divi Akkordeon geschlossen halten

von tom | Nov. 2024 | Akkordeon, Code

Ohne „DIVI-BOOSTER“ Plugin, alles per „jQuery und CSS-Code„

Quelle: https://divibooster.com/make-divi-accordions-closed-by-default/ und https://divibooster.com/make-divi-accordion-module-closable/

Divi-Akkordeons standardmäßig schließen

Das Standardverhalten des Akkordeonmoduls des Divi-Themas besteht darin, das erste Element des Akkordeons als geöffnet anzuzeigen. Wenn Sie möchten, dass alle Akkordeonelemente standardmäßig im geschlossenen Zustand beginnen, können Sie dies tun, indem Sie den folgenden jQuery-Code zu Divi hinzufügen:

jQuery-Code

Füge das Script in Dein CHILD-THEME (Divi -> Integration -> Head) ein.

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

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>

Akkordeonmodule mit jQuery/CSS schließbar machen

Wenn Sie nicht über Divi Booster verfügen und mit dem Hinzufügen von jQuery-/CSS-Code zu Divi vertraut sind, können Sie die Akkordeons mit der folgenden Methode schließbar machen.

Schritt 1: Fügen Sie den folgenden jQuery-Code zu Ihrer Site hinzu, indem Sie ihn beispielsweise in das Feld „Divi > Designoptionen > Integration > Fügen Sie diesen Code zum Kopf Ihres Blogs hinzu“ einfügen .

jQuery-Code

Füge das Script in Dein CHILD-THEME (Divi -> Integration -> Head) ein.

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

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>

Schritt 2: (optional): Um den geöffneten Umschaltern ein „Schließen“-Symbol hinzuzufügen, fügen Sie den folgenden CSS-Code zu Ihrer Site hinzu, indem Sie ihn beispielsweise in das Feld „Divi -> Designoptionen -> Allgemein -> Benutzerdefiniertes CSS“ einfügen .

CSS-Code

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
display: block!important;
content: "\e04f" !important;
}

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {

display: block!important;

content: "\e04f" !important;

}

Gestalten des Schließen-Symbols

Bei allen oben genannten Methoden zum Schließen von Akkordeons übernimmt das Schließen-Symbol die Stile des integrierten „Öffnen“-Symbols. Das bedeutet, dass Sie sowohl das Öffnen- als auch das Schließen-Symbol mit den vorhandenen Optionen in den Akkordeon-Moduleinstellungen gestalten können, z. B.:

Wenn Sie bestimmte Stile nur auf das Schließen-Symbol anwenden möchten (also nicht auf das Öffnen-Symbol), können Sie dies mit CSS wie diesem tun:

CSS-Code

/* Normal state */
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
color: grey !important;
}
/* Hover state */
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:hover:before {
color: blue !important;
}

/* Normal state */

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {

color: grey !important;

}

/* Hover state */

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:hover:before {

color: blue !important;

}

Im obigen Beispiel wird das Symbol normalerweise grau und ändert sich zu blau, wenn Sie mit der Maus darüber fahren. Wenn Sie nicht sicher sind, wie Sie den gewünschten Effekt erzielen, schreiben Sie mir einfach in den Kommentaren.

Hinzufügen eines zweiten Schließen-Symbols am unteren Rand der Umschalter

Wenn Ihre Akkordeon-Umschaltflächen viel Text enthalten, möchten Sie möglicherweise unten ein zweites Schließen-Symbol hinzufügen, damit Ihre Benutzer nicht ganz nach oben scrollen müssen, um die Umschaltfläche zu schließen. Hier ist der Code dazu. Er sollte zusätzlich zu den oben angegebenen Divi Booster-/manuellen Methoden verwendet werden. Der Code kann entweder in einem Codemodul auf der betreffenden Seite oder im Feld „Divi > Designoptionen > Integrationen > Code zum Kopf Ihres Blogs hinzufügen“ platziert werden.

CSS-Code

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

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>

← Divi Image Hover Preistabelle anpassen →