Узнать стоимость проекта

Код помогает по очереди переключать зеро-блоки и скрывать их при повторном нажатии. Предложены 3 варианта реализации

Универсальные табы для зеро-блоков Тильда

Заказать код
Вступить в чат
Поблагодарить
Видео-урок

Инструкция

1

Добавляем 3 кнопки в зеро блок и к ним ссылки #tab1, #tab2, #tab3

2

Создаем 3 зеро-блок и присваиваем каждому class .uc-block

3

Вставили код в блок "Другое" - Т123 в самом низу страницы

4

В самом коде заменили ID блоков на свои

5

Если табов меньше или больше, в коде есть комментарии, удалить или добавить

6

Данные решения временно не отображают корректно галереи внутри!

Код скопирован
Табы №1 (Изначально скрыты все, при нажатии по очереди выезжают)
<!-- Универсальные табы для зеро-блоков Тильда | youx.agency -->
<!-- https://youx.agency/universalnye-taby-dlya-zero-blokov-tilda -->

<style>
  /* Скрываем все блоки по классу */
  .uc-block {
    display: none;
  }
</style>

<script>
  $(document).ready(function() {
      
 // Таб 1
    $('[href="#tab1"]').click(function() {
      var targetBlock = $('#rec668748305');

      // Если блок уже открыт, скрываем его; иначе открываем
      if (targetBlock.is(':visible')) {
        targetBlock.slideUp(500);
      } else {
        // Скрываем все блоки
        $('.uc-block').hide();
        // Открываем первый блок
        targetBlock.slideToggle(500);
        t_lazyload_update();
      }
    });

// Таб 2
    $('[href="#tab2"]').click(function() {
      var targetBlock = $('#rec668748422');

      // Если блок уже открыт, скрываем его; иначе открываем
      if (targetBlock.is(':visible')) {
        targetBlock.slideUp(500);
      } else {
        // Скрываем все блоки
        $('.uc-block').hide();
        // Открываем второй блок
        targetBlock.slideToggle(500);
        t_lazyload_update();
      }
    });

// Таб 3
    $('[href="#tab3"]').click(function() {
      var targetBlock = $('#rec668748625');

      // Если блок уже открыт, скрываем его; иначе открываем
      if (targetBlock.is(':visible')) {
        targetBlock.slideUp(500);
      } else {
        // Скрываем все блоки
        $('.uc-block').hide();
        // Открываем третий блок
        targetBlock.slideToggle(500);
        t_lazyload_update();
      }
    });
    
// Тут вставить кусок кода выше, чтобы сделать больше табов

  });
</script>
Код скопирован
Табы №2 (Изначально скрыты все, при нажатии по очереди отображаются)
<!-- Универсальные табы для зеро-блоков Тильда | youx.agency -->
<!-- https://youx.agency/universalnye-taby-dlya-zero-blokov-tilda -->

<style>
  /* Скрываем все блоки по классу */
  .uc-block {
    display: none;
  }
</style>

<script>
  $(document).ready(function() {
    // Открываем первый блок при загрузке страницы
    $('#rec668748305').show();

    // Таб 1 

    $('[href="#tab1"]').click(function() {
      var targetBlock = $('#rec668748305');

      // Если блок уже открыт, скрываем его; иначе открываем
      if (targetBlock.is(':visible')) {
        targetBlock.hide();
      } else {
        // Скрываем все блоки
        $('.uc-block').hide();
        // Открываем первый блок без анимации выезжания
        targetBlock.show();
        t_lazyload_update();
      }
    });

   // Таб 2

    $('[href="#tab2"]').click(function() {
      var targetBlock = $('#rec668748422');

      // Если блок уже открыт, скрываем его; иначе открываем
      if (targetBlock.is(':visible')) {
        targetBlock.hide();
      } else {
        // Скрываем все блоки
        $('.uc-block').hide();
        // Открываем второй блок без анимации выезжания
        targetBlock.show();
        t_lazyload_update();
      }
    });

   // Таб 3

    $('[href="#tab3"]').click(function() {
      var targetBlock = $('#rec668748625');

      // Если блок уже открыт, скрываем его; иначе открываем
      if (targetBlock.is(':visible')) {
        targetBlock.hide();
      } else {
        // Скрываем все блоки
        $('.uc-block').hide();
        // Открываем третий блок без анимации выезжания
        targetBlock.show();
        t_lazyload_update();
      }
    });

   // Если нужно больше табов: добавить кусок выше и поменять ID и tab

  });
</script>
Код скопирован
Табы №3 (Изначально открыт первый таб, при нажатии по очереди отображаются)
<!-- Универсальные табы для зеро-блоков Тильда | youx.agency -->
<!-- https://youx.agency/universalnye-taby-dlya-zero-blokov-tilda -->

<style>
  /* Скрываем все блоки по классу */
  .uc-block {
    display: none;
  }
</style>

<script>
  $(document).ready(function() {

    // Открываем первый блок при загрузке страницы (Указать ID блока первого таба)
    $('#rec668748305').show();

    // Таб 1 
    $('[href="#tab1"]').click(function() {
      var targetBlock = $('#rec668748305');

      // Если блок уже открыт, скрываем его; иначе открываем
      if (targetBlock.is(':visible')) {
        targetBlock.hide();
      } else {
        // Скрываем все блоки
        $('.uc-block').hide();
        // Открываем первый блок без анимации выезжания
        targetBlock.show();
        t_lazyload_update();
      }
    });

// Таб 2

    $('[href="#tab2"]').click(function() {
      var targetBlock = $('#rec668748422');

      // Если блок уже открыт, скрываем его; иначе открываем
      if (targetBlock.is(':visible')) {
        targetBlock.hide();
      } else {
        // Скрываем все блоки
        $('.uc-block').hide();
        // Открываем второй блок без анимации выезжания
        targetBlock.show();
        t_lazyload_update();
      }
    });

// Таб 3

    $('[href="#tab3"]').click(function() {
      var targetBlock = $('#rec668748625');

      // Если блок уже открыт, скрываем его; иначе открываем
      if (targetBlock.is(':visible')) {
        targetBlock.hide();
      } else {
        // Скрываем все блоки
        $('.uc-block').hide();
        // Открываем третий блок без анимации выезжания
        targetBlock.show();
        t_lazyload_update();
      }
    });

// Тут вставить кусок кода выше, чтобы сделать больше табов

  });
</script>

Другие модификации