Вкладки и табы из zero block в Tilda

Скрываем и показываем блоки по клику в Tilda

AnKu разработка сайтов на тильда, модификации тильда, уроки tilda

Ещё один способ скрывать блоки по клику на кнопки в Tilda. Данный пример подойдет для тех кто хочет сделать много вкладок. Основан он на jQuery плагине Owl Carousel. Да, фактически это слайдер, но функцию вкладок и табов он выполняет, слайды сменяют друг друга только при клике на назначенный вами триггер.
Плюс данного метода в том, что мы можем делиться ссылкой и при открытии сразу будет показана нужная вкладка.
Минусы - скрипт конфликтует с блоком плавного скролла

Пример

В примере я буду использовать 2 блока навигации - стандартный блок меню ME606 и кнопки в Zero block. В качестве блоков с контентом можно использовать как стандартные блоки, так и Zero block. Я же просто размещу Zero с иллюстрациями, которые рисовал ранее.

first

second

third

fourth

fifth

sixth

seventh

Как сделать вкладки из блоков в Tilda

Создаем блок навигации (табы) - любые кнопки, как в стандартном, так и в Zero block
Создаем блок T123, вставляем в него первый код
Создаем блоки с контентом
Создаем ещё один T123, вставляем в него скрипт
Заменяем id блоков на свои
Создаем третий T123, добавляем скрипт
Заменяем id блоков, присваиваем названия ссылок
Добавляем названия ссылок на свои кнопки (ссылки вида #link)

<!-- Область слайдера-->
<!-- В этом блоке будут плавать твои слайды или скрытые блоки -->
<!-- Это первый Т123 -->
<div class="tabs-slider-wrapper"></div>

<!-- Это второй Т123-->
<!-- Тут ничего не меняешь-->
<!-- Стили плагина owl carousel-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<!-- Скрипт плагина owl carousel-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- Тут вставляешь id блоков-->
<script>
  $(document).ready(function() {
    var block = $('#rec331251923'); //id  Т123 область слайдера (тот т123 который был выше)
    var wrap = $('.tabs-slider-wrapper');
    var slides = $('#rec331252325, #rec331253557, #rec331255351, #rec331255438, #rec331256023, #rec331256771, #rec331257477'); // id Zero block слайдов (скрытых блоков)

//ниже ничего не меняешь
    wrap.append('<div class="owl-carousel owl-theme"></div>');
    slides.appendTo(block.find('.owl-carousel'));
    var owl = wrap.find('.owl-carousel').owlCarousel({
      loop: true,
      center: false,
      touchDrag: false,
      pullDrag: false,
      freeDrag: false,
      dots: false,
      center: false,
      nav: false,
      margin: 0,
      mouseDrag: false,
      touchDrag: false,
      autoHeight: true,
      URLhashListener: true,
      startPosition: 'URLHash',
      responsive: {
        0: {
          items: 1
        },
        640: {
          items: 1
        },
        1000: {
          items: 1
        },
      }
    })
  });
</script>

<!-- Это третий Т123
Тут пишешь id zero блоков, которые слайды и назначаешь им ссылки. 
Сейчас там стоят порядковые номера, но можешь что угодно в кавычки вписать
Потом по этой ссылке будет вызываться слайд
Ссылки будут #first или #1 или #tvoy-variant
Ссылку можешь зацепить за любую кнопку или что угодно
Пример вверху на основе меню и на основе zero
Скрытыми могут быть любые блоки, как зеро, так и обычные-->

<script>
//id блока с контентом, потом ссылка, по которой появляется блок
  $("#rec331252325").attr("data-hash", "first");
  $("#rec331253557").attr("data-hash", "second");
  $("#rec331255351").attr("data-hash", "third");
  $("#rec331255438").attr("data-hash", "fourth");
  $("#rec331256023").attr("data-hash", "fifth");
  $("#rec331256771").attr("data-hash", "sixth");
  $("#rec331257477").attr("data-hash", "seventh");
</script>

Если возник вопрос, задайте его в комментариях или через форму внизу страницы.
Не забудьте поделиться записью в соцсетях:)