Как сделать аккордеон из нескольких ZeroBlock в Tilda
Accordion Title #1
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Accordion Title #2
About Product
###TEXT1
###TEXT2
###TEXT3
###TEXT4
Accordion Title #3
Contact US
Accordion Title #4
Map

Как сделать аккордеон из нескольких ZeroBlock в Tilda

1
Пример состоит из 8-ми ZeroBlock. 4 заголовки и 4 контент. Блоки расставлены в порядке Заголовок-Контент-Заголовок-Контент....
2
В блоках заголовков добавили две иконки тучи. Оранжевой задали ссылку #accordicon и расположили поверх чёрной.
3
Поверх заголовка создали кнопку Button и задали её ссылку #accord
4
Добавили код на страницу, в блок Другое - Т123
В коде прописали наши блоки с контентом
//Прописываем ID Блоков Контента
["#rec122335816","#rec123657718","#rec122337147","#rec122392028"];
Mo-tilda. Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём заголовки и контент для аккордеона использую ZeroBlock.
Длительность видео: 22 мин
Фрагмент видео
Библиотека для примера
<script>
   $( document ).ready(function() {
     //Прописываем ID Блоков Контента
     var accordContent = ["#rec122335816","#rec123657718","#rec122337147","#rec122392028"];  
      //Добавляем классы к нашим  блокам
     let i = 0; let number = 0;
     for(let i = 0; i < accordContent.length; i++){
     $(accordContent[i]).addClass('accordC').hide(); };  
     $( 'a[href="#accordicon"]' ).addClass('accordicon');
     $( 'a[href="#accord"]' ).addClass('accord');
     $( '.accordicon' ).click(function(e) {e.preventDefault();}); 
     $( '.accord' ).click(function(e) {e.preventDefault();
       //Вычисляем заголовок  
      if(!$(this).hasClass("accblk") ){
        $( '.accord' ).removeClass('accblk');
        $(this).addClass('accblk');
        $('.accordC').slideUp(800); $('.accordicon').show(500);
        number = $('.accord').index(this);   
        $(accordContent[number]).slideToggle(800);
        $('.accordicon:eq('+number+')').toggle(500);
        }else{
        $( '.accord' ).removeClass('accblk');
        $('.accordC').slideUp(800); $('.accordicon').show(500);
        };
});  });
</script>
Click to order
Cart
Total: 
Телефон
Доставка
Адрес доставки
Payment method
Made on
Tilda