Аккордеон из блоков на Тильде

Инструкция:

1

Создаем блок TX16N и задаем ему класс uc-acc-blocks через настройки блока.

2

Создаем блоки которые будут в карточке аккордеона и добавляем их ID блока в раздел "Описание" через запятую.

3

Создаем блок "Т123" и вставляем код из инструкции.
Код должен быть установлен ниже блока с аккордеоном, в самом конце страницы, или в подвале.

Maureen Zehring

How to write headlines that actually work?

A headline's purpose is to quickly and briefly draw attention to the story. It is generally written by a copy editor, but may also be written by the writer, the page layout designer, or other editors.

Код для блока "Т123"


 <style>
    .filled-accordeons .t585__textwrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script>
    fillAccordeons('.uc-acc-blocks');

    function fillAccordeons(id) {
        $(id).addClass('filled-accordeons');

        $(document).ready(() => {
            setTimeout(() => {
                $(id).find('.t585__accordion').each(function() {
                    const $text = $(this).find('.t585__textwrapper');
                    const ids = $text.text().split(',');
                    $text.html('');

                    addBlocks($text, ids);
                });
            }, 0);
        });

        function addBlocks($target, ids) {
            const ready = ids.every((id) => {
                if ($(id).find('[data-slider-transition]').length && $(id).find('[data-slider-transition]:not([data-slider-initialized="true"])').length) {
                    return false;
                }

                return true;
            });

            if (!ready) {
                setTimeout(() => addBlocks($target, ids), 300);
                return;
            }

            ids.forEach((id) => {
                if (!$(id).length) {
                    return;
                }

                $(id).css({
                    width: '100vw'
                });
                $target.append($(id));
            });
        }
    } 
</script>

Обсудить проект

Error get alias