Paul/korrekturmanagementsystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: toggle faq accordion

Browse Source
This commit is contained in:
Paul
2025-06-11 21:56:44 +02:00
parent 61a7ca6403
commit 8af0bbdb37
4 changed files with 149 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
ticketsystem/templates/ticketsystem/faq.html
View File

@@ -1,19 +1,46 @@
{% extends "ticketsystem/base.html" %}
{% load static %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 py-6">
<!-- Header -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
<div class="flex justify-between items-center">
<h1 class="text-3xl font-bold">❓ Häufig gestellte Fragen</h1>
<a href="{% url 'faq-pdf-download' %}"
class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">📄 PDF Download</a>
<div class="flex gap-2">
<button id="toggle-all-btn"
onclick="toggleAllFAQs()"
class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded">
📂 Alle ausklappen
</button>
<a href="{% url 'faq-pdf-download' %}"
class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">📄 PDF Download</a>
</div>
</div>
</div>
<!-- FAQ Liste -->
{% for faq in faqs %}
<div class="bg-white rounded-lg shadow p-6 mb-4">
<h3 class="font-bold text-lg mb-2">{{ forloop.counter }}. {{ faq.question }}</h3>
<div class="text-gray-700">{{ faq.answer|linebreaks }}</div>
<div class="bg-white rounded-lg shadow mb-4 overflow-hidden">
<!-- FAQ Header - klickbar -->
<button class="w-full p-6 text-left hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition-colors duration-200"
onclick="toggleFAQ({{ forloop.counter0 }})">
<div class="flex justify-between items-center">
<h3 class="font-bold text-lg pr-4">{{ forloop.counter }}. {{ faq.question }}</h3>
<svg id="icon-{{ forloop.counter0 }}"
class="w-5 h-5 text-gray-500 transform transition-transform duration-200"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
</button>
<!-- FAQ Content - versteckt standardmäßig -->
<div id="content-{{ forloop.counter0 }}"
class="hidden px-6 pb-6">
<div class="text-gray-700 border-t pt-4">{{ faq.answer|linebreaks }}</div>
</div>
</div>
{% empty %}
<div class="bg-white rounded-lg shadow p-8 text-center">
@@ -21,4 +48,7 @@
</div>
{% endfor %}
</div>
{% endblock %}
<!-- FAQ JavaScript -->
<script src="{% static 'js/faq.js' %}"></script>
{% endblock %}