https://funktechnik-dathe.de/plugins/faq_jtlshop5/frontend/js/faq_main.js

1let accordion_items = document.querySelectorAll(".accordion");
2
3document.addEventListener("DOMContentLoaded", (elem) => {
4  let location_split = window.location.href.split('#');
5  if(location_split[location_split.length-1].toString().includes("faq-id-")) {
6    let location_anchor_split = location_split[location_split.length-1].replace("faq-id-", "");
7    openConditional("id", location_anchor_split, true);
8  }
9
10// Registriere die Event Listener für die ausklappbaren Inhalte
11for (i = 0; i < accordion_items.length; i++) {
12  accordion_items[i].addEventListener("click", function() {
13    let panel = this.nextElementSibling;
14    if (panel.style.maxHeight) {
15      panel.style.maxHeight = null;
16    } else {
17      panel.style.maxHeight = panel.scrollHeight + "px";
18    }
19  });
20}
21
22// Einträge der Kategorien werden ausgeblendet und erst bei Klick eingeblendet.
23  hideCategoryEntries();
24
25})
26
27// Öffnen nach Bedingung und Art
28function openConditional(type, filter_condition, silent = false) {
29  switch (type) {
30    case "id":
31      for (i = 0; i < accordion_items.length; i++) {
32        let faq_box = accordion_items[i].parentElement;
33        let content_id = faq_box.getAttribute("data-faq-id");
34        if(content_id === filter_condition.toString()) {
35          let panel = faq_box.querySelector(".faq-panel");
36          panel.style.maxHeight = panel.scrollHeight + "px";
37        }
38        if(!silent) self.location.href = "#faq-id-"+filter_condition;
39      }
40      break;
41  }
42}
43
44// Suche nach Bedingungen und Art
45function searchConditional(type, filter_condition) {
46  let faq_box_div = $("div.faq-box");
47  switch (type) {
48    case "id":
49      resetFAQ();
50      faq_box_div.each(function(index, elem){
51        let faq_attribute_id = ($(elem).attr('data-faq-id'));
52        if(faq_attribute_id !== filter_condition) {
53          $(elem).hide();
54        }
55      });
56      break;
57    case "content":
58      faq_box_div.show();
59      faq_box_div.each(function(index, elem){
60        if($(elem).text().toUpperCase().includes(filter_condition)) {
61          elem.classList.remove('d-none')
62        }else {
63          elem.classList.add('d-none')
64        }
65          hideFaqWhenSearchIsEmpty()
66      });
67      break;
68  }
69
70}
71
72// Suche beenden und zurücksetzen
73function resetFAQ() {
74  let searchQuery = document.querySelector("#faqSearch");
75  if(searchQuery != null) {
76    searchQuery.value = null;
77    $("div.faq-box").show();
78  }
79}
80
81// Suche nach einem FAQ Eintrag mit spezifischen Titel
82function searchFAQ() {
83  let input = document.getElementById("faqSearch");
84  let filter = input.value.toUpperCase();
85  searchConditional("content", filter);
86}
87
88// Setzt d-none für alle faq-box wenn die Suche leer ist
89function hideFaqWhenSearchIsEmpty () {
90  let input = document.getElementById("faqSearch");
91  let allEntrys = document.querySelectorAll('.faq-box')
92  allEntrys.forEach((entry) => {
93    if (input.value.length === 0) {
94      entry.classList.add('d-none')
95    }
96  })
97}
98
99// Einträge werden erst bei Klick auf Kategorie sichtbar
100function hideCategoryEntries() {
101  let allCategories = document.querySelectorAll('.faq_categorie')
102  let allEntrys = document.querySelectorAll('.faq-box')
103
104  allCategories.forEach((categorie) => {
105    allEntrys.forEach((entry) => {
106      categorie.addEventListener('click', () => {
107        if (entry.getAttribute("data-category") === categorie.getAttribute("data-category"))
108          entry.classList.toggle("d-none")
109      })
110    })
111  })
112}