https://ps-rada.gov.ua/js/subdomain/modern/misc-elements.js

1
2export function initAccordionMenu() {
3    const accordions = document.querySelectorAll(".accordion-menu")
4    if (!accordions) return
5
6    // change accordion height on resize
7    window.addEventListener("resize", () => {
8        for (let i = 0; i < accordions.length; i++) {
9            const openButton = accordions[i].querySelector(".click-open");
10            if (openButton && openButton.classList.contains("open")) {
11                accordions[i].style.maxHeight = accordions[i].scrollHeight + "px";
12            }
13        }
14    });
15
16
17    for (let i = 0; i < accordions.length; i++) {
18        const accordion = accordions[i];
19
20        // add valid height to each accordion for open/collapse animation to work
21        accordion.style.maxHeight = accordion.scrollHeight + "px";
22
23        const openButton = accordion.querySelector(".click-open");
24        if (!openButton) continue;
25
26        // close accordions that aren't open by default
27        const isOpen = openButton.classList.contains("open");
28        if (!isOpen) {
29            accordion.classList.remove('transition-[max-height]')
30            accordion.classList.remove('duration-300')
31            const accordionStyle = getComputedStyle(accordion);
32            const paddingTop = parseFloat(accordionStyle.paddingTop);
33            const paddingBottom = parseFloat(accordionStyle.paddingBottom);
34            accordion.style.maxHeight = (openButton.offsetHeight + paddingTop + paddingBottom) + "px"
35            accordion.style.overflowY = "hidden";
36            setTimeout(() => {
37                accordion.classList.add('transition-[max-height]')
38                accordion.classList.add('duration-300')
39            }, 500)
40        }
41
42        openButton.addEventListener("click", () => {
43            if (window.innerWidth >= 768 && openButton.classList.contains("accordion-mobile-only")) return;
44
45            const isOpen = openButton.classList.contains("open");
46            if (isOpen) {
47                openButton.classList.remove("open");
48                const accordionStyle = getComputedStyle(accordion);
49                const paddingTop = parseFloat(accordionStyle.paddingTop);
50                const paddingBottom = parseFloat(accordionStyle.paddingBottom);
51                accordion.style.maxHeight = (openButton.offsetHeight + paddingTop + paddingBottom) + "px"
52                accordion.style.overflowY = "hidden";
53                if (accordion.classList.contains("colored-80-on-open")) accordion.classList.remove("bg-colored-80")
54                if (accordion.classList.contains("colored-80-on-open")) accordion.classList.add("border-2")
55            } else {
56                openButton.classList.add("open");
57                accordion.style.maxHeight = accordion.scrollHeight + "px";
58                if (accordion.classList.contains("colored-80-on-open")) accordion.classList.add("bg-colored-80")
59                    if (accordion.classList.contains("colored-80-on-open")) accordion.classList.remove("border-2")
60            }
61        });
62    }
63}