https://fonseca-guajira.gov.co/SiteAssets/rediseno/componentes/ADMAcordeon/assets/js/acordionFunctions.js

1
2export function Accordion() {
3    // Initialize each accordion item based on its expanded state
4    document.querySelectorAll(".accordion-item").forEach((el) => {
5        const isExpanded = el.dataset.expanded === "true";
6        if (isExpanded) {
7        expandItem(el);
8        } else {
9        collapseItem(el);
10        }
11    });
12
13    // Set up event listeners for accordion headers
14    document
15        .querySelectorAll(".accordion-item > .accordion-header")
16        .forEach((header) => {
17        header.addEventListener("click", () => {
18            const currentAccordionItem = header.closest(".accordion-item");
19            const isActive = header.classList.contains("active");
20
21            if (isActive) {
22            collapseItem(currentAccordionItem);
23            } else {
24            // Expand the current accordion item
25            expandItem(currentAccordionItem);
26
27            // Collapse only sibling accordion items at the same level
28            currentAccordionItem.parentElement
29                .querySelectorAll(":scope > .accordion-item")
30                .forEach((item) => {
31                if (item !== currentAccordionItem) {
32                    collapseItem(item);
33                }
34                });
35            }
36        });
37        });
38
39    // Initialize collapse functionality
40    document.querySelectorAll('[data-toggle="collapse"]').forEach((button) => {
41        const target = document.querySelector(button.dataset.target);
42        if (button.getAttribute("aria-expanded") === "true") {
43        expandCollapse(target);
44        button.classList.add("active");
45        } else {
46        target.style.maxHeight = null;
47        }
48
49        button.addEventListener("click", () => toggleCollapse(button));
50    });
51
52    // Function to expand an accordion item
53    function expandItem(item) {
54        const collapse = item.querySelector(":scope > .accordion-collapse");
55        if (collapse) {
56        collapse.style.maxHeight = collapse.scrollHeight + "px";
57        collapse.style.opacity = "1";
58        item.querySelector(":scope > .accordion-header").classList.add("active");
59
60        // Reset the max-height to auto after the animation ends
61        collapse.addEventListener("transitionend", function onTransitionEnd() {
62            collapse.style.maxHeight = "none";
63            collapse.removeEventListener("transitionend", onTransitionEnd);
64        });
65        }
66    }
67
68    // Function to collapse an accordion item
69    function collapseItem(item) {
70        const collapse = item.querySelector(":scope > .accordion-collapse");
71        if (collapse) {
72        collapse.style.maxHeight = collapse.scrollHeight + "px"; // Set to current height to trigger transition
73        collapse.offsetHeight; // Trigger reflow to apply transition
74        collapse.style.maxHeight = "0";
75        collapse.style.opacity = "0";
76        item.querySelector(":scope > .accordion-header").classList.remove("active");
77        }
78    }
79
80    // Function to toggle collapse
81    function toggleCollapse(button) {
82        const target = document.querySelector(button.dataset.target);
83        const isExpanded = button.getAttribute("aria-expanded") === "true";
84
85        if (isExpanded) {
86        collapseCollapse(target);
87        button.setAttribute("aria-expanded", "false");
88        button.classList.remove("active");
89        } else {
90        expandCollapse(target);
91        button.setAttribute("aria-expanded", "true");
92        button.classList.add("active");
93        }
94    }
95
96    function expandCollapse(element) {
97        element.style.maxHeight = element.scrollHeight + "px";
98        element.style.opacity = "1";
99    }
100
101    function collapseCollapse(element) {
102        element.style.maxHeight = element.scrollHeight + "px"; // Set to current height to trigger transition
103        element.offsetHeight; // Trigger reflow to apply transition
104        element.style.maxHeight = "0";
105        element.style.opacity = "0";
106    }
107}
108
109