Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом

100

#2470a1

Делаем выпадающий список "аккордеон" в ZeroBlock Tilda

AWESOME

NEW TOUCH MOBILE

APP.

There are many variations of passages of Lorem Ipsum available, but the majorityhave suffered alteration in some form, Learn more

AWESOME

NEW TOUCH MOBILE

APP.

There are many variations of passages of Lorem Ipsum available, but the majorityhave suffered alteration in some form, Learn more

Love

Speed

Magic

Делаем выпадающий список "аккордеон" в ZeroBlock Tilda

Создали ZeroBlock

Добавили в нём элемент HTML и прописали в нём div
<div class="accordion" ></div>

Добавили блок TX16N с настройками:
- ширина - 6 колонок
- отступ слева -нет
- отступ снизу и сверху - не задан
- заполнили 4 вкладки

Добавили скрипт на страницу в блок ДРУГОЕ►T123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём список с выпадающими вкладками аккордеон в ZeroBlock.
Длительность видео: 28 мин

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера

<script>
$( document ).ready(function() {
  //Прописываем ID наших блоков  
      var ZeroID = "#rec166100554"; //Zero
      var AccoRD = "#rec166100555"; // TX16N
  //Добавляем класс к нашим картинкам      
      $('[href="#mainpic"]').addClass('mainpic');
  //Переносим аккордеон в ZeroBlock      
      $(AccoRD).appendTo('.accordion');
      $('.accordion').closest('.tn-elem').addClass('accordion-wrapper');
      var ZeroBack = ""+ZeroID+" .t396__artboard , "+ZeroID+" .t396__carrier ,  "+ZeroID+" .t396__filter";
      var oldheight = $(AccoRD+" .t585__opened").siblings('.t585__content').height();
  //При загрузке
    if($(AccoRD+" .t585__header").hasClass('t585__opened')){
        cohnheight = $(AccoRD+" .t585__opened").siblings('.t585__content').height();
        setTimeout(function(){$(ZeroBack).animate({height:'+='+cohnheight},300);
        $(".mainpic").closest(".tn-elem").animate({top:'+='+cohnheight},300);
         }, 3000);
    };
  //При раскрытии нужного аккордеона  - изменяем высоту ZeroBlock и положение картинок    
     $( AccoRD+" .t585__header" ).click(function() { 
          var thelem=this;
        setTimeout(function(){cohnheight=0;movey=0;
        $(AccoRD+" .t585__opened").siblings('.t585__content').each(function( index ) {
            cohnheight = cohnheight + $(this).height();
        });
        if(cohnheight>oldheight){ movey = cohnheight - oldheight;
        $(ZeroBack).animate({height:'+='+movey},300);
         $(".mainpic").closest(".tn-elem").animate({top:'+='+movey},300);
            }else{ movey = oldheight - cohnheight;
            $(ZeroBack).animate({height:'-='+movey},300); 
             $(".mainpic").closest(".tn-elem").animate({top:'-='+movey},300);
            };oldheight = cohnheight;
          }, 400);     
      });
let target = document.querySelector('.accordion-wrapper');
let observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        let newVal = $(mutation.target).prop(mutation.attributeName);
        if (mutation.attributeName === "style") {
            $(AccoRD+' .t585__header').removeClass('t585__opened');oldheight=0;cohnheight=0;
            $(AccoRD+' .t585__content').hide();$(ZeroBack).css('height','');
	};  
});
});
observer.observe( target , {  attributes: true}); 
 
});
</script>

Код для второго аккордеона на странице, если нужен

<script>
$( document ).ready(function() {
  //Прописываем ID наших блоков  
      var ZeroID2 = "#rec1151961146"; //Zero
      var AccoRD2 = "#rec1151961856"; // TX16N
  //Добавляем класс к нашим картинкам      
      $('[href="#mainpic2"]').addClass('mainpic2');
  //Переносим аккордеон в ZeroBlock      
      $(AccoRD2).appendTo('.accordion2');
      $('.accordion2').closest('.tn-elem').addClass('accordion-wrapper2');
      var ZeroBack2 = ""+ZeroID2+" .t396__artboard , "+ZeroID2+" .t396__carrier ,  "+ZeroID2+" .t396__filter";
      var oldheight2 = $(AccoRD2+" .t585__opened").siblings('.t585__content').height();
  //При загрузке
    if($(AccoRD2+" .t585__header").hasClass('t585__opened')){
        cohnheight2 = $(AccoRD2+" .t585__opened").siblings('.t585__content').height();
        setTimeout(function(){$(ZeroBack2).animate({height:'+='+cohnheight2},300);
        $(".mainpic2").closest(".tn-elem").animate({top:'+='+cohnheight2},300);
         }, 3000);
    };
  //При раскрытии нужного аккордеона  - изменяем высоту ZeroBlock и положение картинок    
     $( AccoRD2+" .t585__header" ).click(function() { 
          var thelem=this;
        setTimeout(function(){cohnheight2=0;movey=0;
        $(AccoRD2+" .t585__opened").siblings('.t585__content').each(function( index ) {
            cohnheight2 = cohnheight2 + $(this).height();
        });
        if(cohnheight2>oldheight2){ movey = cohnheight2 - oldheight2;
        $(ZeroBack2).animate({height:'+='+movey},300);
         $(".mainpic2").closest(".tn-elem").animate({top:'+='+movey},300);
            }else{ movey = oldheight2 - cohnheight2;
            $(ZeroBack2).animate({height:'-='+movey},300); 
             $(".mainpic2").closest(".tn-elem").animate({top:'-='+movey},300);
            };oldheight2 = cohnheight2;
          }, 400);     
      });
let target2 = document.querySelector('.accordion-wrapper2');
let observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        let newVal = $(mutation.target2).prop(mutation.attributeName);
        if (mutation.attributeName === "style") {
            $(AccoRD2+' .t585__header').removeClass('t585__opened');oldheight2=0;cohnheight2=0;
            $(AccoRD2+' .t585__content').hide();$(ZeroBack2).css('height','');
	};  
});
});
observer.observe( target2 , {  attributes: true}); 
 
});
</script>