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

От /

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

Я не знаю, что еще лучше привлечет ваше внимание, чем это красное поле…
Убедительная просьба, прочитайте статью, а не бездумно вставляйте код. Если у вас что-то не работает – это 99,99% потому что вы не внимательно прочитали или вовсе не прочитали текст. Я отвечаю многим людям и почти в 100% виновата невнимательность.

Так же, напоминаю!
Если есть вопрос, что-то не работает, не получается, нужно переделать или адаптировать код к вашему проекту, пожалуйста оставьте заявку и я с вами свяжусь.
Если поставили код, а он не работает, то с вопросом, скидывайте ссылку на страницу своего проекта.

Текст комментария “А я поставил, а не работает” — не может дать мне понять, что же конкретно произошло и что у вас не работает, а страницу я могу проинспектировать и понять, где вы накосячили.

НОВЫЕ СКРИПТЫ ДЛЯ ТАБОВ И ВКЛАДОК, И СКРЫВАЕМОГО КОНТЕНТА ДОСТУПНЫ ПО ССЫЛКЕ

ВОТ ТУТ НОВЫЙ СКРИПТ ВЗАМЕН ЭТОМУ

Новый аналог

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

Пример

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

ME606

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

  1. Создаем блок навигации (табы) – любые кнопки, как в стандартном, так и в Zero block
  2. Создаем блок T123, вставляем в него первый код
  3. Создаем блоки с контентом
  4. Создаем ещё один T123, вставляем в него скрипт
  5. Заменяем id блоков на свои
  6. Создаем третий T123, добавляем скрипт
  7. Заменяем id блоков, присваиваем названия ссылок
  8. Добавляем названия ссылок на свои кнопки (ссылки вида #link)

Первый Т123

<!-- Область слайдера-->
<!-- В этом блоке будут плавать твои слайды или скрытые блоки -->
<!-- Это первый Т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>
<script>
$(document).ready(function() {
  var location = window.location.href;
  var active = '#' + location.split('#').pop();
  $('.tb').each(function() {
    var link = $(this).find('a').attr('href');
    if (location != link) {
      $('.tb').first().addClass('active');
    }
    if (active == link) {
      $(this).addClass('active');
    } else {
      $(window).bind('hashchange', function() {
        var location = window.location.href;
        var active = '#' + location.split('#').pop();
        $('.tb').each(function() {
          var link = $(this).find('a').attr('href');
          if (active == link) {
            $(this).addClass('active');
          } else {
            $(this).removeClass('active');
          }
        });
      });
    }
  });
});
</script>

<!--Стиль активной кнопки-->
<style>
  .tb.active .tn-atom {
    background-color:#000!important;
  }
</style>

Чат поддержки
Чат поддержки