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

Как добавить блоки в раскрывающиеся списки
Пример работы скрипта
  • Hight Quality
    We are a leading firm in providing quality and value to our customers. Each member of our team has at least 5 years of legal experience. We like what we do.
  • Good Support
    Our managers are always ready to answer your questions. You can call us during the weekends and at night. You can also visit our office for a personal consultation.
  • Nice Prices And Gifts
    Our prices are fixed for some standard services and we offer discounts for regular clients. Also, we ask our new clients about their birthday and prepare cool presents.
  • Individual Approach
    Our company works according to the principle of individual approach to every client. This method allows us to achieve success in problems of all levels.
  • Hight Quality
    We are a leading firm in providing quality and value to our customers. Each member of our team has at least 5 years of legal experience. We like what we do.
  • Good Support
    Our managers are always ready to answer your questions. You can call us during the weekends and at night. You can also visit our office for a personal consultation.
  • Nice Prices And Gifts
    Our prices are fixed for some standard services and we offer discounts for regular clients. Also, we ask our new clients about their birthday and prepare cool presents.
  • Individual Approach
    Our company works according to the principle of individual approach to every client. This method allows us to achieve success in problems of all levels.
#rec409535626,.uc-docs
#rec409542612,.uc-scripts
Инструкция
  • 1
    Добавьте на страницу аккордеон и задайте ему класс uc-acc-blocks через настройки блока
    Скрипт работает с блоками TX16N и TX16N2
  • 2
    Установите скрипт на страницу в HTML-блок
    Скрипт должен быть установлен ниже блока с аккордеоном, в самом конце страницы, или в подвале
  • 3
    Добавьте ID блоков в контент карточек аккордеона
    Вы можете добавлять по несколько блоков в каждую карточку, перечисляя их через запятую. Посмотреть как.
  • 4
    Опубликуйте страницу
    Наслаждайтесь результатом!
Скрипт

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

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


        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(()=>{
                $(id).find('.t585__accordion, .t668__accordion').each(function() {
                    const $text = $(this).find('.t585__textwrapper, .t668__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));
            }
            );
        }
    }
    // Инструкция по работе со скриптом https://trilda.ru/kak-dobavit-lubie-bloki-v-akkordeon-tilda
</script>
Вопросы и комментарии
Made on
Tilda