Lesefortschritt:

Gesamtes Akkordeon-Modul im Divi-Theme per Button öffnen oder schliessen

17. Januar 2024 | Divi-Theme, Scripts

Dieser Beitrag beinhaltet 1454 Wörter. – Geschätzte Lesezeit: ca. 8 Minuten.

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

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