Elementor Accordion mit dynamischen ACF-Inhalten

Elementor Accordion mit dynamischen ACF-Inhalten

Wenn ein Elementor Accordion in einem Template verwendet wird, können die Inhalte
über ACF dynamisch befüllt werden. Problematisch wird es allerdings, wenn nicht auf
jeder Seite gleich viele Accordion-Einträge vorhanden sind: Elementor erwartet eine
feste Anzahl an Items.

Die einfache Lösung: Im Template wird eine ausreichend große Anzahl an Accordion-Items
vorbereitet. Nicht befüllte Items werden anschließend per JavaScript automatisch entfernt.

Warum kein ACF Repeater?

Ursprünglich war die Umsetzung mit einem ACF Repeater angedacht. Damit ließen sich Fragen
und Antworten zwar beliebig oft anlegen, die dynamische Ausgabe als einzelne Items des
Elementor Accordions wird dadurch aber unnötig kompliziert.

Für FAQs mit einer überschaubaren maximalen Anzahl ist es wesentlich einfacher, feste
ACF-Felder vorzubereiten. Die Kundin befüllt nur so viele Fragen und Antworten, wie sie
auf der jeweiligen Seite benötigt.

1. ACF-Felder anlegen

In der ACF-Feldgruppe werden mehrere Paare aus Frage und Antwort angelegt, zum Beispiel:

Frage 1
Antwort 1

Frage 2
Antwort 2

Frage 3
Antwort 3

...

Frage 10
Antwort 10

Die Anzahl richtet sich danach, wie viele FAQ-Einträge maximal benötigt werden.
Zehn vorbereitete Paare reichen beispielsweise aus, wenn keine Seite mehr als zehn
Fragen enthalten soll.

2. Accordion im Elementor-Template vorbereiten

Im Elementor Nested Accordion wird für jedes vorbereitete ACF-Feldpaar ein eigenes
Accordion-Item angelegt.

Beispiel für das zweite Item:

Titel:
ACF Feld → Frage 2

CSS ID:
faq-item-2

Inhalt:
Texteditor → ACF Feld → Antwort 2

Entsprechend werden die weiteren Items durchnummeriert:

faq-item-1
faq-item-2
faq-item-3
faq-item-4
...

Wichtig ist das gemeinsame Präfix faq-item-. Darüber erkennt das
JavaScript später alle FAQ-Items.

3. Leere Accordion-Items entfernen

Wenn auf einer Seite beispielsweise nur vier Fragen ausgefüllt sind, bleiben die
Titel der übrigen vorbereiteten Accordion-Items leer. Elementor würde diese Items
trotzdem rendern.

Folgendes JavaScript sucht deshalb alle FAQ-Items und entfernt diejenigen, deren
Titel keinen Inhalt enthält:

<script>
document.addEventListener('DOMContentLoaded', function() {

    document.querySelectorAll('[id^="faq-item-"]').forEach(item => {

        const title = item.querySelector('.e-n-accordion-item-title-text');

        if (!title || title.textContent.trim() === '') {
            item.remove();
        }

    });

});
</script>

Das Script kann beispielsweise in einem HTML-Widget im Template untergebracht werden.

Ergebnis

Das Elementor-Template enthält technisch weiterhin eine feste Anzahl an Accordion-Items.
Im Frontend erscheinen aber nur diejenigen, für die auf der jeweiligen Seite tatsächlich
eine Frage eingetragen wurde.

Beispiel: Im Template sind zehn FAQ-Items vorbereitet. Auf einer Seite werden nur
Frage 1 bis Frage 4 und die zugehörigen Antworten ausgefüllt.
Die Items 5 bis 10 haben einen leeren Titel und werden beim Laden der Seite automatisch
entfernt.

So kann dasselbe Elementor-Template für Seiten mit unterschiedlich vielen FAQs verwendet
werden, ohne Repeater, zusätzliches Plugin oder eine eigene dynamische Accordion-Ausgabe.

Wichtig

Die Prüfung erfolgt über den Titel des Accordion-Items. Ist das Feld
Frage X leer, wird das komplette zugehörige Item entfernt. Deshalb sollte
immer die Frage als Kriterium verwendet werden und nicht die Antwort.