
<!-- Универсальные табы для зеро-блоков Тильда | 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>

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

Вступите в наш чат в Телеграмм

Будьте в курсе новых событий, получите помощь, найдите единомышленников

Вступить