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

DOWNLOAD

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

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>