Das Akkordeon-Modul des Divi-Themes bietet keine Möglichkeit, alle Akkordeon-Toggles auf einmal zu öffnen oder zu schliessen. Hier erfahren Sie, wie Sie einen Button hinzufügen, der genau das tut.
Zunächst müssen Sie Ihrer Seite oder dem Beitrag ein Button-Modul hinzufügen, über welchen Sie dereinst das gesamte Accordion öffnen oder schliessen können.
- Beim Button-Text können Sie z.B. «Alle öffnen» vermerken.
- Im Tab «Erweitert», unter «CSS-ID & Klassen» müssen Sie im Textfeld «CSS-ID» noch den Text «open-close-button» eintragen.
Nun erstellen Sie Ihr Accordion indem Sie der Seite oder dem Beitrag ein Akkordeon-Modul hinzufügen.
- Auch diesem vergeben Sie eine CSS-ID: Im Tab «Erweitert», unter «CSS-ID & Klassen» müssen Sie im Textfeld «CSS-ID» noch den Eintrag «open-close-accordion» speichern.
Nun kommt ein umfangreiches Script zum Zug. Sie finden es in der Folge. Fügen Sie den Code entweder dem <head>-Bereich Ihrer Website hinzu (im Backend unter Divi/Theme-Optionen/Integration/Code dem < head > Ihres Blogs hinzufügen) oder Sie kopieren den Script-Code in ein Code-Modul auf jener Seite, wo Sie den Button und das Akkordeon anzeigen möchten:
Damit dieser Trick funktioniert, muss Ihr Akkordeon-Modul vollständig geschlossen starten – also beim Laden kein Accordion-Tab geöffnet werden. In der Standard-Einstellung des Divi-Themes ist dies nicht der Fall. Sie können aber nachbessern. Beachten Sie hierfür den Beitrag «Divi-Accordions geschlossen starten und/oder per Klick öffnen und schliessen», dessen «Trick 1» sorgt dafür, dass das Akkordeon-Modul in geschlossenem Zustand startet.
<script>
jQuery(function($){
var buttonSelector = '#open-close-button';
var accordionSelector = '#open-close-accordion';
class Button {
constructor(selector, openAllText='Alle öffnen', closeAllText='Alle schliessen') {
this.elem = $(selector);
this.openAll = openAllText;
this.closeAll = closeAllText;
}
setTextToOpenAll() {
this.elem.text(this.openAll);
}
setTextToCloseAll() {
this.elem.text(this.closeAll);
}
isCloseAll() {
return (this.elem.text() == this.closeAll);
}
addClickHandler(accordion, callback) {
this.elem.click(
{button: this, accordion: accordion},
function(e) {
e.preventDefault();
callback(e.data.button, e.data.accordion);
}
);
}
}
class Toggle {
constructor(elem) {
this.elem = elem;
}
isOpen() {
return this.elem.hasClass('et_pb_toggle_open');
}
click() {
this.title().click();
}
addClickHandler(button, accordion, callback) {
this.title().click(
{button: button, accordion: accordion},
function(e) {
callback(
e.data.button,
e.data.accordion,
new Toggle($(this).closest('.et_pb_accordion_item'))
);
}
);
}
title() {
return this.elem.find('.et_pb_toggle_title');
}
opened() {
return new Toggle(this.elem.filter('.et_pb_toggle_open'));
}
closed() {
return new Toggle(this.elem.filter('.et_pb_toggle_close'));
}
count() {
return this.elem.length;
}
}
class Accordion {
constructor(selector) {
this.selector = selector;
}
elem() {
return $(this.selector);
}
isToggling() {
return this.elem().hasClass('.et_pb_accordion_toggling');
}
clickOpenedToggles() {
this.toggles().opened().click();
}
clickClosedToggles() {
this.toggles().closed().click();
}
addToggleClickHandler(button, callback) {
this.toggles().addClickHandler(button, this, callback);
}
hasOneToggleOpen() {
return (this.toggles().opened().count() == 1);
}
toggles() {
return new Toggle(this.elem().find('.et_pb_accordion_item'));
}
}
var $button = new Button(buttonSelector);
var $accordion = new Accordion(accordionSelector);
$button.setTextToOpenAll();
$button.addClickHandler(
$accordion,
function(button, accordion) {
if (accordion.isToggling()) return;
if (button.isCloseAll()) {
accordion.clickOpenedToggles();
button.setTextToOpenAll();
} else {
accordion.clickClosedToggles();
button.setTextToCloseAll();
}
}
);
$accordion.addToggleClickHandler(
$button,
function(button, accordion, toggle){
var lastToggleBeingClosed = (toggle.isOpen() && accordion.hasOneToggleOpen());
if (lastToggleBeingClosed) {
button.setTextToOpenAll();
} else {
button.setTextToCloseAll();
}
}
);
});
</script>
Nun sollte das Akkordeon auf der Live-Website mit dem Button ergänzt sein und funktionieren. Ein Beispiel sehen Sie nebenan:
Wenn Sie übrigens die Button-Beschriftung ändern möchten, können Sie dies in Zeile 8 des Script-Codes tun.
1. Akkordeon-Tab
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
2. Akkordeon-Tab
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
3. Akkordeon-Tab
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Werbung