Делаем выпадающий список "аккордеон" в 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
LOVE DESIGN
We are the leading firm by delivering quality and value to our clients. All our professionals have more than 5 years of legal experiences. We like what we do.
CLEAN CODE
Our managers are always ready to answer your questions. You can call us at the weekends and at night. Also you can visit our office for personal consultation.
BRANDING
Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.
ANIMATION
Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam.

Делаем выпадающий список "аккордеон" в 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');
      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").parent(".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").parent(".tn-elem").animate({top:'+='+movey},300);
            }else{ movey = oldheight - cohnheight;
            $(ZeroBack).animate({height:'-='+movey},300); 
             $(".mainpic").parent(".tn-elem").animate({top:'-='+movey},300);
            };oldheight = cohnheight;
          }, 400);     
      });
 $( window ).resize(function() {
    $(AccoRD+' .t585__header').removeClass('t585__opened');oldheight=0;cohnheight=0;
    $(AccoRD+' .t585__content').hide();$(ZeroBack).css('height','');
});
});
</script>
Made on
Tilda