document.addEventListener('DOMContentLoaded', () => {
    const
        listToShow = document.querySelectorAll('.qa-list'),
        itemsToClick = document.querySelectorAll('.qa-list .item__wrapper'),
        questionsList = document.querySelectorAll('.questions-list li');

    questionsList.forEach((item, i )=> {
        item.addEventListener('click', () => {
            questionsList.forEach(item => item.classList.remove('question-active'));
            item.classList.add('question-active');
            listToShow.forEach((item, j) => {
                if(i === j) {
                    listToShow.forEach(item => item.classList.add('hide'));
                    item.classList.remove('hide');
                }
            })
        })
    })

    itemsToClick.forEach(item => {
        item.addEventListener('click', () => {
            // Find the corresponding text__wrapper-to-open element for the clicked item
            const textWrapper = item.nextElementSibling;
            const liElem = item.parentElement;

            // Закрываем все другие блоки
            document.querySelectorAll('.text__wrapper-to-open').forEach(wrapper => {
                if (wrapper !== textWrapper) {
                    wrapper.classList.remove('show-flex'); // Скрыть блок
                    wrapper.previousElementSibling.parentElement.classList.remove('li-active'); // Скрыть активный класс у li
                    wrapper.previousElementSibling.querySelector('.img-open').classList.add('hide'); // Скрыть открытую иконку
                    wrapper.previousElementSibling.querySelector('.img-hover').classList.remove('hide'); // Скрыть hover иконку
                    wrapper.previousElementSibling.querySelector('.img-closed').classList.remove('hide'); // Показать закрытую иконку
                }
            });

            // Toggle the visibility of the text__wrapper-to-open element
            textWrapper.classList.toggle('show-flex');

            // toggle image rotate
            liElem.classList.toggle('li-active');
            item.querySelector('.img-open').classList.toggle('hide');
            item.querySelector('.img-hover').classList.toggle('hide');
            item.querySelector('.img-closed').classList.toggle('hide');

        });
    });


})