Wenn ein Elementor Accordion mit ACF-Feldern befüllt wird, können einzelne Accordion-Items leer bleiben. Damit leere Fragen nicht als leere Accordion-Zeilen sichtbar sind, blenden wir sie per JavaScript aus.
Warum diese Lösung notwendig sein kann
Elementor unterstützt dynamische Inhalte aus ACF-Repeatern derzeit nur eingeschränkt. Zwar lassen sich Repeater-Felder über Loop-Elemente ausgeben, die harmonieren aber nicht zuverlässig mit dem nativen Accordion-Widget von Elementor.
In der Praxis führt das häufig zu einem von zwei Problemen:
- Das Accordion lässt sich nicht direkt mit einem Repeater verbinden.
- Die Inhalte müssen über eigene HTML-, CSS- und JavaScript-Lösungen aufgebaut werden.
Für einzelne FAQ-Bereiche wäre eine individuelle Accordion-Lösung zwar möglich, sie verursacht aber deutlich mehr Aufwand bei Erstellung, Wartung und späteren Anpassungen.
Deshalb verwenden wir in solchen Fällen das native Elementor-Accordion mit einer festen Anzahl von Accordion-Items. Die Fragen werden über dynamische ACF-Felder befüllt. Bleibt ein Feld leer, würde Elementor das entsprechende Accordion-Item trotzdem anzeigen.
Das Script entfernt diese leeren Accordion-Items automatisch beim Laden der Seite. So bleibt die Pflege einfach, die Redakteure können weiterhin das Standard-Accordion von Elementor verwenden und es sind keine individuellen Accordion-Komponenten erforderlich.
1. ACF-Felder richtig benennen
Die ACF-Felder müssen fortlaufend benannt werden:
- frage_1
- frage_2
- frage_3
- frage_10
- frage_18
2. CSS ID im Accordion setzen
Die IDs müssen mit faq-item- beginnen. Die Zahl dahinter kann frei gewählt werden.
- faq-item-1
- faq-item-2
- faq-item-3
Code im HTML-Widget einfügen
Füge unter dem Accordion ein Elementor HTML-Widget ein und hinterlege dort diesen Code:
<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>Was der Code macht
Der Code prüft nach dem Laden der Seite alle Accordion-Items, deren CSS-ID mit faq-item- beginnt. Ist der Titel leer, entfernt der Code das komplette Accordion-Item.
Wichtig
Das ACF-Feld für die Frage muss im Titelbereich des jeweiligen Accordion-Items ausgegeben werden. Der Code prüft nur den sichtbaren Titel, nicht das ACF-Feld direkt.
Die CSS-ID muss exakt mit faq-item- beginnen. Nur dann erkennt der Code das Accordion-Item und kann es bei Bedarf ausblenden.