https://www.kimep.kz/wp-content/themes/kimep/js/accordion.js

1'use strict';
2class Accordion {
3    constructor(el) {
4        this.el = el;
5        this.summary = el.querySelector('.accordion_btn');
6        this.content = el.querySelector('.accordion_content');
7        this.links = this.content.querySelectorAll('.accordion_link');
8        this.inputValue = el.querySelector(".accordion_input");
9        this.animation = null;
10        this.isClosing = false;
11        this.isExpanding = false;
12        this.summary.addEventListener('click', (e) => this.onClick(e));
13        this.links.forEach(link => {
14            link.addEventListener("click", (e) => {
15                this.inputValue.value = e.target.innerHTML;
16                this.summary.innerHTML = e.target.innerHTML;
17                this.shrink();
18            });
19        });
20        this.shrink();
21    }
22    onClick(e) {
23        e.preventDefault();
24        this.el.style.overflow = 'hidden';
25        if (this.isClosing || !this.el.open) {
26            this.open();
27        } else if (this.isExpanding || this.el.open) {
28            this.shrink();
29        }
30    }
31    shrink() {
32        this.isClosing = true;
33        const startHeight = `${this.el.offsetHeight}px`;
34        const endHeight = `${this.summary.offsetHeight}px`;
35        if (this.animation) {
36            this.animation.cancel();
37        }
38        this.animation = this.el.animate({
39            height: [startHeight, endHeight]
40        }, {
41            duration: 400,
42            easing: 'ease-out'
43        });
44        this.animation.onfinish = () => this.onAnimationFinish(false);
45        this.animation.oncancel = () => this.isClosing = false;
46    }
47    open() {
48        this.el.style.height = `${this.el.offsetHeight}px`;
49        this.el.open = true;
50        this.el.setAttribute('opened', 'true');
51        window.requestAnimationFrame(() => this.expand());
52    }
53    expand() {
54        this.el.setAttribute('opened', 'true');
55        this.isExpanding = true;
56        const startHeight = `${this.el.offsetHeight}px`;
57        const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
58        if (this.animation) {
59            this.animation.cancel();
60        }
61        this.animation = this.el.animate({
62            height: [startHeight, endHeight]
63        }, {
64            duration: 400,
65            easing: 'ease-out'
66        });
67        this.animation.onfinish = () => this.onAnimationFinish(true);
68        this.animation.oncancel = () => this.isExpanding = false;
69    }
70    onAnimationFinish(open) {
71        this.el.open = open;
72        this.el.setAttribute('opened', open);
73        this.animation = null;
74        this.isClosing = false;
75        this.isExpanding = false;
76
77        if (open) {
78            this.el.style.height = 'auto';
79            this.el.style.overflow = 'visible';
80        } else {
81            this.el.style.height = `${this.summary.offsetHeight}px`;
82            this.el.style.overflow = 'hidden';
83        }
84    }
85}
86document.querySelectorAll('.accordion').forEach((el) => {
87    if (!el.dataset.maxwidth || window.innerWidth < parseInt(el.dataset.maxwidth)) {
88        new Accordion(el);
89    } 
90});