Аккордеон из zero-блоков на Tilda

<!--Кастомный аккордеон из zero-блоков на Тильда
Студия веб-дизайна SHEINA – https://sheina-studio.ru/-->

<!-- ===== ИНСТРУКЦИЯ =====
1️⃣  КАРТОЧКА ОТКРЫТИЯ АККОРДЕОНА
Создаем zero-блок — это будет первая карточка аккордеона
Добавляем заголовок
Добавляем элемент — стрелку, задаем класс   .uc-accord-arrow  
Поверх всего контента добавляем кнопку и делаем ей прозрачность 0%, задаем класс   .uc-accord-open  
Всей карточке zero задаем класс   .uc-accord-card-1  

2️⃣  КАРТОЧКА КОНТЕНТА
Ниже добавляем новый zero-блок и наполняем его всем необходимым контентом.
Задаем всему блоку контента класс (такой же как класс у заголовка выше), к которому он относится —   .uc-accord-card-1  

3️⃣  ДРУГИЕ КАРТОЧКИ
Ниже дублируем зеро-блоки заголовка и контента к нему нужное кол-во раз. Меняем у них контент и задаем соответствующие классы:
2 карточка заголовка и ее контент —   .uc-accord-card-2  
3 карточка заголовка и ее контент —   .uc-accord-card-3  
и т.д.

❗️   ВАЖНО. Контентные блоки идут под соответствующими им карточками для их открытия.

4️⃣  НИЖЕ ВСТАВЛЯЕМ КОД
В коде вы можете отредактировать настройки отображения аккордеона (в коде есть примечания, где это сделать):
Текст первой карточки открыт сразу:   true (да) / false (нет)  
Отображать только одну раскрытую карточку или все, которые были открыты:   true (все) / false (одна)  -->



<script>
    // Текст первой карточки открыт сразу
    const ucOpenFirstOnLoad = false;    // true=да / false=нет

    // Отображать только одну раскрытую карточку
    const ucAllowMultipleOpen = true; // false = одна открыта, true = все, которые открыли

    $(document).ready(function () {

        $('[class*="uc-accord-card-"]').each(function () {
            const $block = $(this);
            if ($block.find('.uc-accord-open').length === 0) {
                $block.hide().removeClass('active-accord');
            }
        });

        function getContentBlock($headerCard) {
            const classList = $headerCard.attr('class').split(/\s+/);
            const cardClass = classList.find(function (cls) {
                return cls.indexOf('uc-accord-card-') === 0;
            });
            if (!cardClass) return $();

            const $sameClassBlocks = $('.' + cardClass);

            const $contentBlock = $sameClassBlocks.filter(function () {
                return $(this).find('.uc-accord-open').length === 0;
            });

            return $contentBlock;
        }

        if (ucOpenFirstOnLoad) {
            const $firstTrigger = $('.uc-accord-open').first();
            if ($firstTrigger.length) {
                const $firstHeaderCard = $firstTrigger.closest('[class*="uc-accord-card-"]');
                const $firstContent = getContentBlock($firstHeaderCard);

                if ($firstContent.length) {
                    $firstContent.addClass('active-accord').show(); // без анимации
                    $firstHeaderCard.find('.uc-accord-arrow').addClass('rotated');
                }
            }
        }

        $('.uc-accord-open').on('click', function (e) {
            e.preventDefault();

            const $clicked = $(this);
            const $headerCard = $clicked.closest('[class*="uc-accord-card-"]');
            if (!$headerCard.length) return;

            const $contentBlock = getContentBlock($headerCard);
            if (!$contentBlock.length) return;

            const isOpen = $contentBlock.hasClass('active-accord');

            if (ucAllowMultipleOpen) {
                if (isOpen) {
                    // закрываем только свою
                    $contentBlock.removeClass('active-accord').slideUp(300);
                    $headerCard.find('.uc-accord-arrow').removeClass('rotated');
                } else {
                    // открываем только свою
                    $contentBlock.addClass('active-accord').slideDown(300);
                    $headerCard.find('.uc-accord-arrow').addClass('rotated');
                }
                return;
            }

            if (isOpen) {
                $contentBlock.removeClass('active-accord').slideUp(300);
                $headerCard.find('.uc-accord-arrow').removeClass('rotated');
            } else {
                $('[class*="uc-accord-card-"]').each(function () {
                    const $block = $(this);
                    if ($block.find('.uc-accord-open').length === 0) {
                        $block.removeClass('active-accord').slideUp(300);
                    }
                });

                $('.uc-accord-arrow').removeClass('rotated');

                $contentBlock.addClass('active-accord').slideDown(300);
                $headerCard.find('.uc-accord-arrow').addClass('rotated');
            }
        });
    });
</script>



<style>
    .uc-accord-arrow {
        transition: transform 0.3s ease;
    }

    .uc-accord-arrow.rotated {
        transform: rotate(90deg);
    }

    .uc-accord-open {
        cursor: pointer;
    }
</style>