https://www.justspices.de/static/version1790005904/frontend/Justsp…/de_DE/JustSpices_Cms/js/norequire/faq.js

1document.addEventListener('DOMContentLoaded', function() {
2    document.querySelectorAll('.faq-question-wrapper').forEach((faqQuestionWrapper) => {
3        faqQuestionWrapper.querySelector('.card-header button').addEventListener('click', function() {
4            faqQuestionWrapper.querySelector('.card-header').classList.toggle('active');
5            if(faqQuestionWrapper.querySelector('.collapse').style.display === 'block'){
6                closeFaq(faqQuestionWrapper);
7            }else{
8                openFaq(faqQuestionWrapper);
9            }
10        });
11    });
12});
13
14function openFaq(faqQuestionWrapper){
15    faqQuestionWrapper.querySelector('.collapse').style.display = 'block';
16    faqQuestionWrapper.querySelector('.collapse').style.overflow = 'hidden';
17
18    let answerHeight = faqQuestionWrapper.querySelector('.collapse').offsetHeight;
19    faqQuestionWrapper.querySelector('.collapse').style.height = '0px';
20    let startTime = null;
21    let animationDuration = 300;
22    let initialHeight = 0;
23
24    function animateHeight(timestamp) {
25        if (!startTime) startTime = timestamp;
26
27        let progress = Math.min(1, (timestamp - startTime) / animationDuration);
28        let newHeight = initialHeight + (answerHeight - initialHeight) * progress;
29
30        faqQuestionWrapper.querySelector('.collapse').style.height = newHeight + 'px';
31
32        if (progress < 1) {
33            requestAnimationFrame(animateHeight);
34        }else{
35            faqQuestionWrapper.querySelector('.collapse').style.overflow = '';
36            faqQuestionWrapper.querySelector('.collapse').style.height = '';
37        }
38    }
39
40    requestAnimationFrame(animateHeight);
41}
42
43function closeFaq(faqQuestionWrapper){
44    faqQuestionWrapper.querySelector('.collapse').style.overflow = 'hidden';
45    let answerHeight = faqQuestionWrapper.querySelector('.collapse').offsetHeight;
46    faqQuestionWrapper.querySelector('.collapse').style.height = answerHeight + 'px';
47
48    let startTime = null;
49    let animationDuration = 300;
50    let initialHeight = 0;
51
52    function animateHeight(timestamp) {
53        if (!startTime) startTime = timestamp;
54
55        let progress = Math.min(1, (timestamp - startTime) / animationDuration);
56        let newHeight = answerHeight + (initialHeight - answerHeight) * progress;
57
58        faqQuestionWrapper.querySelector('.collapse').style.height = newHeight + 'px';
59
60        if (progress < 1) {
61            requestAnimationFrame(animateHeight);
62        }else{
63            faqQuestionWrapper.querySelector('.collapse').style.display = 'none';
64            faqQuestionWrapper.querySelector('.collapse').style.overflow = '';
65            faqQuestionWrapper.querySelector('.collapse').style.height = '';
66        }
67    }
68
69    requestAnimationFrame(animateHeight);
70}