Как сделать аккордеон из нескольких 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 мин
Фрагмент видео
Библиотека для примера
<style>
.accblk , a[href="#accordicon"]{pointer-events:none;}
</style>

<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"]' ).click(function(e) {e.preventDefault();}); 
    $( 'a[href="#accord"]' ).click(function(e) {e.preventDefault();
       //Вычисляем заголовок  
        $( 'a[href="#accord"]' ).removeClass('accblk'); $(this).addClass('accblk');
        $('.accordC').slideUp(800); $('a[href="#accordicon"]').show(500);
        number = $('a[href="#accord"]').index(this);   
        $(accordContent[number]).slideToggle(800);
        $('a[href="#accordicon"]:eq('+number+')').toggle(500);
});  });
</script>
Made on
Tilda