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

Оформить доступ с промокодом
100
Делаем выпадающий список "аккордеон" в 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

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

1
Создали ZeroBlock
2
Добавили в нём элемент HTML и прописали в нём div
<div class="accordion" ></div>
3
Добавили блок TX16N с настройками:
- ширина - 6 колонок
- отступ слева -нет
- отступ снизу и сверху - не задан
- заполнили 4 вкладки
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>
Made on
Tilda