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

Как выполнили данный пример:
Использовали два блока ZeroBlock + TX16N

1. Создали ZeroBlock
2. Добавили в нём элемент HTML и прописали в нём div
<div class="accordion" ></div>

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

4. Добавили скрипт на страницу в блок ДРУГОЕ►T123
СПИСОК ВСЕХ ВИДЕО
Видеоинструкция данного примера
Видеоинструкция данного примера доступна в архиве
mo-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём аккордеон как в примере в ZeroBlock
2. Прописываем анимацию для остальных элементов в ZeroBlock
3. Добавляем вкладки с объёмным контентом
4. Добавляем больше самих вкладок
5. Используем 2-а способа создания аккордеона - лёгкий и сложный

Создаём список с выпадающими вкладками аккордеон в ZeroBlock.
Длительность видео: 37 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео
<script>
$( document ).ready(function() {
  //Прописываем ID наших блоков  
      var ZeroID = "#rec66743800"; //Zero
      var AccoRD = "#rec66744363"; // TX16N
  //Добавляем класс к нашим картинкам      
      $('[href="#mainpic"]').addClass('mainpic');
  //Переносим аккордеон в ZeroBlock      
      $(AccoRD).appendTo('.accordion');
  //Прописываем путь до высот в ZeroBlock      
      var ZeroBack = ""+ZeroID+" .t396__artboard , "+ZeroID+" .t396__carrier ,  "+ZeroID+" .t396__filter";
    
  //Прописываем переменные счётчика для каждой вкладки в аккордеоне
     var st0=0 , st1=0 , st2=0 , st3=0;// Четыре вкладки
  //При раскрытии нужного аккордеона  - изменяем высоту ZeroBlock и положение картинок    
  //При нажатии на первую вкладку
     $( AccoRD+" .t585__header:eq(0)" ).click(function() { 
       $(ZeroBack).animate({height:(++st0 % 2) ? '+=90' : '-=90'},600); //высота Zero
       $(".mainpic").parent(".tn-elem").animate({top:(st0 % 2) ? '+=90' : '-=90'},600);}); //положение картинок    
  
  //При нажатии на вторую вкладку
     $(AccoRD+ " .t585__header:eq(1)" ).click(function() { 
       $(ZeroBack).animate({height:(++st1 % 2) ? '+=90' : '-=90'},600); //высота Zero
       $(".mainpic").parent(".tn-elem").animate({top:(st1 % 2) ? '+=90' : '-=90'},600);}); //положение картинок    
     
  //При нажатии на третью вкладку
     $( AccoRD+" .t585__header:eq(2)" ).click(function() { 
       $(ZeroBack).animate({height:(++st2 % 2) ? '+=90' : '-=90'},600); //высота Zero
       $(".mainpic").parent(".tn-elem").animate({top:(st2 % 2) ? '+=90' : '-=90'},600);}); //положение картинок    

  //При нажатии на четвёртую вкладку
     $( AccoRD+" .t585__header:eq(3)" ).click(function() { 
       $(ZeroBack).animate({height:(++st3 % 2) ? '+=90' : '-=90'},600); //высота Zero
       $(".mainpic").parent(".tn-elem").animate({top:(st3 % 2) ? '+=90' : '-=90'},600);}); //положение картинок    
 
 
});//$( document ).ready(function() {
</script>
Made on
Tilda