77 lines
2.7 KiB
HTML
77 lines
2.7 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}FAQ - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container py-5">
|
|
<h1 class="mb-4">Häufig gestellte Fragen</h1>
|
|
|
|
<!-- FAQ-Kategorien -->
|
|
<div class="mb-4">
|
|
<div class="btn-group">
|
|
<button class="btn btn-outline-primary active" data-category="all">Alle</button>
|
|
{% for category in categories %}
|
|
<button class="btn btn-outline-primary" data-category="{{ category }}">{{ category }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ-Akkordeon -->
|
|
<div class="accordion" id="faqAccordion">
|
|
{% for faq in faqs %}
|
|
<div class="accordion-item" data-category="{{ faq.category }}">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#faq{{ forloop.counter }}">
|
|
{{ faq.question }}
|
|
</button>
|
|
</h2>
|
|
<div id="faq{{ forloop.counter }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
|
<div class="accordion-body">
|
|
{{ faq.answer|linebreaks }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="alert alert-info">
|
|
Aktuell sind keine FAQ-Einträge verfügbar.
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Kontakt-Button -->
|
|
<div class="text-center mt-5">
|
|
<p>Keine Antwort auf Ihre Frage gefunden?</p>
|
|
<a href="{% url 'products:contact' %}" class="btn btn-primary">
|
|
<i class="bi bi-envelope"></i> Kontaktieren Sie uns
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const categoryButtons = document.querySelectorAll('[data-category]');
|
|
const faqItems = document.querySelectorAll('.accordion-item');
|
|
|
|
categoryButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
// Aktiven Button markieren
|
|
categoryButtons.forEach(btn => btn.classList.remove('active'));
|
|
button.classList.add('active');
|
|
|
|
// FAQs filtern
|
|
const selectedCategory = button.dataset.category;
|
|
faqItems.forEach(item => {
|
|
if (selectedCategory === 'all' || item.dataset.category === selectedCategory) {
|
|
item.style.display = 'block';
|
|
} else {
|
|
item.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
{% endblock %} |