https://www.kfd.de/_assets/b479676ee9da2108175b7ff330a561a0/JavaScript/lns_gadgets_accordion.js?1789991092

1/*! Created by: Udo Schmal | https://www.gocher.me/ */
2(function () {
3  'use strict';
4
5  let localLinks = document.querySelectorAll("[href^='#']");
6  let hash = window.location.hash;
7  let anchor = null;
8  if (hash) {
9    let id = hash.substring(1);
10    anchor = document.getElementById(id);
11  }
12
13  function Accordion(accordion) {
14    let multiselect = accordion.getAttribute('data-multiselect') === 'true';
15    let scrollIntoView = accordion.getAttribute('data-scrollintoview') === 'true';
16    let current = null;
17    let sheets = accordion.children;
18
19    function toggle(event) {
20      let sheet = this.parentNode;
21      if (multiselect) {
22        sheet.classList.toggle("active");
23      } else {
24        if (current !== sheet) {
25          if (current) {
26            current.classList.remove("active");
27          }
28          current = sheet;
29          sheet.classList.add("active");
30        } else {
31          // close all
32          current.classList.remove("active");
33          current = null;
34        }
35      }
36      if (scrollIntoView) {
37        sheet.scrollIntoView();
38      }
39    }
40
41    for (let i = 0; i < sheets.length; i++) {
42      if (anchor && sheets[i].contains(anchor) || sheets[i].id == anchor) {
43        if (!multiselect && current) {
44          current.classList.remove("active");
45        }
46        sheets[i].classList.add("active");
47        current = sheets[i];
48      } else if (!multiselect && sheets[i].classList.contains("active")) {
49        if (current) {
50          sheets[i].classList.remove("active");
51        } else {
52          current = sheets[i];
53        }
54      }
55      sheets[i].setAttribute('tabindex', '0');
56      let header = sheets[i].querySelector('.sheet-header');
57      header.addEventListener('click', toggle);
58      let ids = sheets[i].querySelectorAll("[id]");
59      for (let iId = 0; iId < ids.length; iId++) {
60        for (let iLocalLinks = 0; iLocalLinks < localLinks.length; iLocalLinks++) {
61          if (localLinks[iLocalLinks].href.split('#')[1] == ids[iId].id) {
62            localLinks[iLocalLinks].addEventListener('click', function (event) {
63              header.click();
64            });
65          }
66        }
67      }
68    }
69
70    // connect search-as-you-type input to this accordion
71    let searchInput = document.querySelector('.accordion-filter-input[data-target="' + accordion.getAttribute('id') +  '"]');
72    if (searchInput) {
73      searchInput.addEventListener('keyup', (e) => {
74        let query = e.target.value.toLowerCase();
75        for (let i = 0; i < sheets.length; i++) {
76          if (sheets[i].textContent.toLowerCase().indexOf(query) > -1) {
77            sheets[i].classList.remove('hidden');
78          } else {
79            sheets[i].classList.add('hidden');
80          }
81        }
82      });
83    }
84  }
85
86  let accordionList = document.querySelectorAll("ul[data-type='accordion']"), cnt = accordionList.length, i;
87  if (cnt > 0) {
88    for (i = 0; i < cnt; i++) {
89      new Accordion(accordionList[i]);
90    }
91    // accessibility: handle tabindex enter keydown event
92    document.addEventListener('keydown', function (event) {
93      if (event.key === "Enter") {
94        if (event.target.parentNode && event.target.parentNode.dataset.type === 'accordion') {
95          let target = event.target.querySelector('.sheet-header');
96          if (target && typeof target.click === 'function'){
97            target.click();
98          }
99        }
100      }
101    });
102  }
103})();