https://sankt-anna-biebertal.de/_assets/afda9b37bbbb38d3e0a775c098bcb126/Js/accordion.js?1789044955

1document.querySelectorAll('.accordion-button').forEach(initAccordion);
2
3function initAccordion(btn) {
4  btn.addEventListener('click', function () {
5    let parent = this.closest('.accordion-item');
6    let wrapper = parent.querySelector('.accordion-collapse');
7    let body = parent.querySelector('.accordion-body');
8
9    parent.classList.toggle('active');
10
11    if (parent.classList.contains('active')) {
12      this.setAttribute('aria-expanded', 'true');
13      wrapper.style.display = 'block';
14      wrapper.style.height = `${body.offsetHeight}px`;
15      setTimeout(() => {
16        wrapper.style.height = 'auto';
17      }, 200); // Set to transition duration
18      setTimeout(() => {
19        wrapper.style.overflow = 'unset';
20      }, 400); // Set to transition duration
21    } else {
22      this.setAttribute('aria-expanded', 'false');
23      wrapper.style.height = `${body.offsetHeight}px`;
24      setTimeout(() => {
25        wrapper.style.height = 0;
26      }, 1);
27      setTimeout(() => {
28        wrapper.style.display = 'none';
29      }, 200); // Set to transition duration
30      wrapper.style.overflow = 'hidden';
31      setTimeout(() => {
32        collapseChildCollapse(parent);
33      }, 400); // Set to transition duration
34    }
35  });
36}
37
38function collapseChildCollapse(parentElement) {
39  const subElements = parentElement.querySelectorAll('.accordion-item.active');
40
41  subElements.forEach((subElement) => {
42    subElement.classList.remove('active');
43
44    const button = subElement.querySelector('.accordion-button');
45
46    if (button) {
47      button.setAttribute('aria-expanded', 'false');
48    }
49
50    const collapseElement = subElement.querySelector('.accordion-collapse');
51
52    if (collapseElement) {
53      collapseElement.style.height = '0';
54      collapseElement.style.display = 'none';
55      collapseElement.style.overflow = 'hidden';
56    }
57  });
58}
59
60document.addEventListener('DOMContentLoaded', function () {
61  const accordionHeaders = document.querySelectorAll('.accordion-header');
62
63  accordionHeaders.forEach((header) => {
64    const nestingLevel = getNestingLevel(header);
65
66    header.classList.add(`accordion-header-sub${nestingLevel}`);
67    /*
68     * Calculate the top gap for the Element to Stick to.
69     * 80 is Navbar and each level adds 55 for height of a parent Header
70     */
71    header.style.top = `${80 + (nestingLevel - 1) * 55}px`;
72  });
73});
74
75function getNestingLevel(element) {
76  let level = 0;
77  let parent = element.closest('.frame-type-accordion');
78
79  while (parent) {
80    level++;
81    parent = parent.parentElement.closest('.frame-type-accordion');
82  }
83
84  return level;
85}
86
87new MutationObserver((mutations) => {
88  mutations.forEach((mutation) => {
89    mutation.addedNodes.forEach((node) => {
90      if (node.nodeType === 1) {
91        if (node.matches?.('.accordion-button')) initAccordion(node);
92
93        node.querySelectorAll?.('.accordion-button').forEach(initAccordion);
94      }
95    });
96  });
97}).observe(document.body, {childList: true, subtree: true});