Filter

src/pages/faq/index.astro

@@ -5,6 +5,67 @@ import Layout from "#layouts/Layout.astro";
 
 ---
 
+<script>
+
+document.addEventListener("DOMContentLoaded", () => {
+  const tags = document.querySelectorAll(".keyword-cloud__tag");
+  const faqSections = document.querySelectorAll(".faq__section");
+
+  const selectedKeywords = new Set();
+
+  // Toggle keyword selection
+  tags.forEach((tag) => {
+    tag.addEventListener("click", () => {
+      const keyword = tag.dataset.keyword;
+
+      // Toggle keyword in the selected set
+      if (selectedKeywords.has(keyword)) {
+        selectedKeywords.delete(keyword);
+        tag.classList.remove("keyword-cloud__tag--active");
+      } else {
+        selectedKeywords.add(keyword);
+        tag.classList.add("keyword-cloud__tag--active");
+      }
+
+      // Update FAQ visibility
+      updateFaqVisibility();
+    });
+  });
+
+  const updateFaqVisibility = () => {
+    if (selectedKeywords.size === 0) {
+      // If no keywords are selected, show all sections
+      faqSections.forEach((section) => {
+        section.classList.remove("faq__section--visible");
+        section.classList.add("faq__section--visible");
+      });
+      return;
+    }
+
+    // Show only sections matching the selected keywords
+    faqSections.forEach((section) => {
+      const sectionKeywords = section.dataset.keywords.split(", ");
+      const hasMatch = [...selectedKeywords].some((keyword) =>
+        sectionKeywords.includes(keyword)
+      );
+
+      if (hasMatch) {
+        section.classList.add("faq__section--visible");
+        section.classList.remove("hidden");
+      } else {
+        section.classList.remove("faq__section--visible");
+        section.classList.add("hidden");
+      }
+    });
+  };
+});
+
+
+</script>
+
+
+
+
 <Layout title="FAQ - Sammmlung">
 
 <h1 class="text-3xl">FAQ – Sammlung</h1>
@@ -359,6 +420,20 @@ import Layout from "#layouts/Layout.astro";
   &__tag:hover {
     @apply shadow-md;
   }
+
+  &__tag--active {
+    @apply bg-blue-300 text-blue-900 font-bold;
+  }
 }
+
+.faq__section {
+  @apply hidden mt-4;
+
+  &--visible {
+    @apply block;
+  }
+}
+
 </style>	
+
 </Layout>