аккордеон Zero Block в Tilda
Модификация для Tilda
Пример
Вкладка #1
Вкладка 1
Tilda Publishing
Good design is obvious. Great design is transparent.
Вкладка #2
Вкладка 2
Tilda Publishing
Вкладка #3
Вкладка 3
Tilda Publishing
Вкладка #4
Вкладка 4
Tilda Publishing
Вкладка #5
Вкладка 5
Tilda Publishing
Вкладка #6
Вкладка 6
Tilda Publishing
Инструкция
1. Создаём минимум два Zero Block'а.
1.1 В первом будет триггер для раскрытия следующего блока (кнопка, шейп, текст или любой другой элемент).
1.2 Во второй блоке будет инфо, которое будет раскрываться.

2. Размещаем Zero Block по порядку: Заголовок-Контент-Заголовок-Контент.
Допускается любое кол-во вкладок.

См. ниже скриншот
3. Блокам заголовков и связанных с ними контентных блоков задали классы:
"uc-accord-a-1" , "uc-accord-a-2", "uc-accord-a-3", "uc-accord-a-4"

Поясняю: первому блоку, где триггер на открытие (любая кнопка, шейп или др.) задаём класс "uc-accord-a-1"
Второму блоку, который раскроется, задаём тоже класс "uc-accord-a-1"
Третьему блоку, где триггер для второй раскрывающейся вкладки, задаём класс "uc-accord-a-2"
Четвёртому блоку, который раскроется, задаём тоже класс "uc-accord-a-2"
Пятому блоку, где триггер для третьей раскрывающейся вкладки, задаём класс "uc-accord-a-3"
Шестому блоку, который раскроется, задаём класс "uc-accord-a-3"
И так далее.

ВАЖНО! Должна быть "Связка". Первый блок с триггером, под ним блок который раскроется. Обоим задаём класс "uc-accord-a-1", второй паре задаём класс "uc-accord-a-2", третьему "uc-accord-a-3", четвёртому "uc-accord-a-4", и так далее. Хоть 100 вкладок.

Как задать класс Zero Block описал тут.

4. Элементу или нескольким элементам (если вкладку будут открывать, например, несколько кнопок), которые в блоках заголовка будут открывать аккордеон, задали класс "accord". Ссылку (URL) оставляем пустую.

Иконке (например стрелке, которая будет поворачиваться) задали класс "accord-icon"
Задаём класс кнопке или любому другому элементу
Задаём класс шейпу или изображению
5. Добавляем HTML код на страницу, в блок Другое - Т123
HTML код в блок T123


<!-- Аккордеон в Zero Блок -->
<!-- Блок представлен сайтом https://sitebelov.ru/ - Инструкции: https://sitebelov.ru/zeroaccord -->

<script>

$( document ).ready(function() {
    
$(function () { 
    let liter = 'a'; //Литера для сборки
    let oneAcc = true; // Открывать по одной вкладке  false - true
    let accOpen = false; // Открытая  вкладка  false - true
    let openNum = 3; // Номер открытой вкладки
    let scroll = false; // Скролл к открытой вкладке  false - true
    
    $('.accord-icon').addClass('accord');

	$('div[class*="uc-accord-'+liter+'"]').each(function(index){
        $('.uc-accord-'+liter+'-'+index+':first').addClass('title-accord').attr('data-accord-index', index);
        $('.uc-accord-'+liter+'-'+index+'').not(':first').addClass('content-accord hide-accord');
        
	});
	
	if(accOpen){
	    $('div[class*="uc-accord-'+liter+'-'+openNum+'"]').addClass('active-accord');
	    $('div.content-accord[class*="uc-accord-'+liter+'-'+openNum+'"]').removeClass('hide-accord');  
	};
	
	setTimeout(function(){ $('.content-accord').addClass('time-step')}, 1500);

	function videoStop(){
	    setTimeout(function(){ 
	        $('div.content-accord.hide-accord[class*="uc-accord-'+liter+'-"]').each(function(){
	            let videoNum = $(this).find('div[data-elem-type="video"]').length;
	            if(videoNum){
                    $(this).find('div[data-elem-type="video"]').each(function(){
                        $(this).find('iframe').attr( 'src', function ( i, val ) { return val; });
                    });    
	            };
	        });
	    }, 300);
	};

	$('div[class*="uc-accord-'+liter+'"]').find('.accord').click(function(e){
        let cT = $(this).closest('.title-accord');
        let ind = cT.attr('data-accord-index');
        
        
        if(oneAcc){
            //По одной  вкладке
            if( cT.hasClass('active-accord') ){
                cT.removeClass('active-accord');
                $('div.content-accord.uc-accord-'+liter+'-'+ind+'').toggleClass('hide-accord');  
                videoStop();
            }else{
                $('div.title-accord[class*="uc-accord-'+liter+'"]').removeClass('active-accord');
                cT.addClass('active-accord');
                $('div.content-accord[class*="uc-accord-'+liter+'-"]').addClass('hide-accord');
                $('div.content-accord.uc-accord-'+liter+'-'+ind+'').removeClass('hide-accord');  
                videoStop();
            };
     
        }else{
            //По несколько вкладок
            cT.toggleClass('active-accord');
            $('div.content-accord.uc-accord-'+liter+'-'+ind+'').toggleClass('hide-accord');  
            videoStop();
        };
        
            if(scroll){ //скролл до вкладки
            let el = $(this).closest('.r');
            setTimeout(function(){
                $('html, body').animate({scrollTop:  el.offset().top-50   }, 400);
            }, 600);
        };

	});
    
});
      
});
</script>
<style>
.hide-accord .t396__artboard {
    height: 0!important;
    pointer-events: none!important;
    overflow: hidden!important;
}    
.content-accord.time-step .t396__artboard , .accord-icon {   transition: all 0.4s ease-in-out}    
.content-accord {
    padding-top: 0!important;
    padding-bottom: 0!important;
}
.active-accord .accord-icon {  transform: rotate(90deg)}
.accord {  cursor: pointer}
</style>

Made on
Tilda