diff --git a/Minecraft-Modern-Theme-Child/js/faq-accordion.js b/Minecraft-Modern-Theme-Child/js/faq-accordion.js new file mode 100644 index 0000000..cf65e78 --- /dev/null +++ b/Minecraft-Modern-Theme-Child/js/faq-accordion.js @@ -0,0 +1,47 @@ +document.addEventListener('DOMContentLoaded', function() { + + // === FAQ TABS FUNKTIONALITÄT === + const tabButtons = document.querySelectorAll('.faq-tab-button'); + const tabPanes = document.querySelectorAll('.faq-tab-pane'); + + tabButtons.forEach(button => { + button.addEventListener('click', () => { + // 1. Aktive Klassen von allen Buttons und Panes entfernen + tabButtons.forEach(btn => btn.classList.remove('active')); + tabPanes.forEach(pane => pane.classList.remove('active')); + + // 2. Aktive Klasse zum geklickten Button hinzufügen + button.classList.add('active'); + + // 3. Den zugehörigen Inhalt (Pane) finden und aktivieren + const targetCategory = button.getAttribute('data-category'); + const targetPane = document.querySelector(`.faq-tab-pane[data-category="${targetCategory}"]`); + if (targetPane) { + targetPane.classList.add('active'); + } + }); + }); + + + // === FAQ AKKORDEON FUNKTIONALITÄT (bleibt unverändert) === + const faqItems = document.querySelectorAll('.faq-item'); + + faqItems.forEach(item => { + const question = item.querySelector('.faq-question'); + const answer = item.querySelector('.faq-answer'); + + if (question && answer) { + question.addEventListener('click', () => { + // 'active' Klasse zum aktuellen Item togglen + const isActive = item.classList.toggle('active'); + + // Höhe der Antwort anpassen für smooth slide + if (isActive) { + answer.style.maxHeight = answer.scrollHeight + 'px'; + } else { + answer.style.maxHeight = null; + } + }); + } + }); +}); \ No newline at end of file