Tilda. Аккордеон на zero блоке.

Добро пожаловать на страницу, посвящённую созданию аккордеона из зеро блоков на платформе Тильда.

В этой статье вы узнаете, как использовать аккордеон — полезный инструмент для создания вкладок с раскрывающимся содержимым — на своём сайте. Вы сможете вставить в эти вкладки не только текст, но и любую другую информацию, а также оформить всё так, как нужно именно вам. Аккордеоны помогают органично представить контент и улучшают навигацию по сайту, делая пользовательский опыт более удобным и интуитивно понятным. Присоединяйтесь и откройте для себя новые возможности дизайна и функционала с Tilda!
№1. Первый слайд
Первый слайд
№2. Второй слайд
Второй
слайд
№3. Третий слайд
Третий
слайд
Код для аккордеона на зеро блоке
  1. Создаем ZERO блок с аккордеоном
  2. Назначаем BLOCK CSS CLASS NAME - uc-accord-a-1
  3. Назначаем CSS CLASS NAM для текста и шейпа - accord
  4. Назначаем CSS CLASS NAM для стрелочки - accord-icon
  5. Создаем ZERO блок с содержимым аккордеона
  6. Клонируем блоки необходимое количество раз в логичной последовательности
  7. Создаем блок T123 для вставки html кода
  8. Вставили код в блок
<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
    
	$('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[class*="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[class*="uc-accord-'+liter+'-'+ind+'"]').removeClass('hide-accord');  
                videoStop();
            };
     
        }else{
            //По несколько вкладок
            cT.toggleClass('active-accord');
            $('div.content-accord[class*="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(180deg)}
.accord {  cursor: pointer}
</style>
Если хотите научиться создавать классные сайты на Tilda и стать настоящим профессионалом, приглашаем на курс "Сайты на Tilda".

Наш курс позволяет освоить все навыки, необходимые для создания продающих сайтов, от идеи до финального воплощения. Вы получите полное понимание процессов, начиная с разработки концепции сайта и заканчивая его полноценным запуском. В программу входит изучение уникальных инструментов Tilda. Вы научитесь делать акцент на визуале, грамотно оформлять контент и создавать удобные для пользователей интерфейсы.

Кроме технических аспектов, мы уделяем большое внимание стратегиям продаж и продвижения, чтобы ваш сайт не просто выглядел привлекательно, но и эффективно привлекал клиентов. Завершив обучение, вы будете готовы создавать качественные и конкурентоспособные веб-ресурсы, способные удовлетворить потребности современного бизнеса. Присоединяйтесь к нам и сделайте первый шаг на пути к профессиональному успеху в веб-дизайне!
узнать подробнее
Made on
Tilda