Show FAQ topics as an in-page accordion instead of drill-down pages

Elternbeirat.Web/Features/Faqs/FaqList.razor

@@ -25,16 +25,23 @@ else if (_topics.Count == 0)
 }
 else
 {
-    <ul class="faq-topic-list">
-        @foreach (var topic in _topics)
-        {
-            <li>
-                <h2><a href="@($"/faqs/{topic.Slug}")">@topic.Title</a></h2>
-                @if (!string.IsNullOrWhiteSpace(topic.Intro))
-                {
-                    <div class="faq-topic-intro">@((MarkupString)Markdown.ToHtml(topic.Intro))</div>
-                }
-            </li>
-        }
-    </ul>
+    @foreach (var topic in _topics)
+    {
+        <details class="faq-topic">
+            <summary>@topic.Title</summary>
+            @if (!string.IsNullOrWhiteSpace(topic.Intro))
+            {
+                <div class="faq-topic-intro">@((MarkupString)Markdown.ToHtml(topic.Intro))</div>
+            }
+            @foreach (var faq in topic.Faqs)
+            {
+                <details class="faq-item">
+                    <summary>@faq.Question</summary>
+                    <div class="faq-answer">
+                        @((MarkupString)Markdown.ToHtml(faq.Answer))
+                    </div>
+                </details>
+            }
+        </details>
+    }
 }