Переключатель блоков на Тильде

Показать/скрыть несколько блоков по нажатию на кнопки Тильда. Делаем из блоков категории.
Несколько кнопок - заголовки наших категорий. При клике показываем блок в зависимости от того, какая кнопка нажата: при нажатии на первую кнопку - показывается первый блок, а при нажатии на 2 кнопку 1 блок скрывается и показывается 2 блок.

Пример, а ниже код и инструкция по установке модификации показать/скрыть несколько блоков по нажатию на кнопку.

Данный пример доступен на десктопной версии сайта

Круги

Инструкция по установке модификации показа и скрытия любых блоков (стандартных или Зеро блоков) для Тильды:

Добавили кнопки/картинки в ZeroBlock.
Прописали каждой кнопке ссылку (например: 'circle', 'dots', 'gear', 'pulse', 'other')
Создали несколько блоков (любые: стандартные или Zero Block)
Каждому блоку задали CSS-класс такой же, как ссылки у кнопок. (1 блок будет иметь класс uc-circle, второй - uc-dots и т.д.)
Скопировали код ниже и вставили его в блок .t123

UPD от 12.02.26
Если вы работаете с галлереей или фотографиями и модификация не загружает фото, то в комментариях к посту есть решение

<!-- Табы с фильтрацией категорий. https://t.me/breeze_tilda -->

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Список всех ваших якорей/категорий. Перечислите здесь все свои категории.
  var cats = ['circle', 'dots', 'gear', 'pulse', 'other'];

  cats.forEach(function(cat){
    var block = document.querySelector('.uc-' + cat);
    if (block) block.style.display = 'none';
  });

  cats.forEach(function(cat){
    var link = document.querySelector('a[href="#' + cat + '"]');
    if (link) {
      link.addEventListener('click', function(e){
        e.preventDefault();
        cats.forEach(function(c){
          var b = document.querySelector('.uc-' + c);
          if (b) b.style.display = 'none';
        });
        var block = document.querySelector('.uc-' + cat);
        if (block) block.style.display = 'block';
      });
    }
  });

  // Можно автоматически показать первый блок при загрузке (например, circle). Если не надо - удалите код ниже.
  var firstBlock = document.querySelector('.uc-' + cats[0]);
  if (firstBlock) firstBlock.style.display = 'block';
});
</script>

UPD от 05.08.25
Обновленная модификация ниже позволяет перейти на соотвтесвующий блок на этой же странице по нажатию на ссылку в хедере.

Укажите в хэдере или где-нибудь еще (любая ссылка на сайте) ссылку вида #other, #circle и т.д. (точно такие же, как в табах категорий). И когда человек нажмет на нее, то его перебросит на соответствующий блок.

<!-- Табы с хэш-навигацией и прокруткой. https://t.me/breeze_tilda -->

<script>
document.addEventListener('DOMContentLoaded', function () {
  var cats = ['circle', 'dots', 'gear', 'pulse', 'other'];

  cats.forEach(function(cat){
    var block = document.querySelector('.uc-' + cat);
    if (block) block.style.display = 'none';
  });

  function showBlock(cat) {
    cats.forEach(function(c){
      var b = document.querySelector('.uc-' + c);
      if (b) b.style.display = 'none';
    });
    var block = document.querySelector('.uc-' + cat);
    if (block) {
      block.style.display = 'block';
      block.scrollIntoView({ behavior: 'smooth' });
    }
  }

  document.addEventListener('click', function(e) {
    var link = e.target.closest('a');
    if (link && link.href) {
      var href = link.getAttribute('href');
      if (href && href.startsWith('#')) {
        var cat = href.replace('#', '');
        if (cats.includes(cat)) {
          e.preventDefault();
          e.stopPropagation();
          showBlock(cat);
          history.pushState(null, null, '#' + cat);
        }
      }
    }
  }, true);

  var hash = window.location.hash.replace('#', '');
  if (hash && cats.includes(hash)) {
    showBlock(hash);
  } else {
    var firstBlock = document.querySelector('.uc-' + cats[0]);
    if (firstBlock) firstBlock.style.display = 'block';
  }

  window.addEventListener('hashchange', function() {
    var hash = window.location.hash.replace('#', '');
    if (hash && cats.includes(hash)) {
      showBlock(hash);
    }
  });
});
</script>

Модификация работает со всеми блоками и позволяет сделать каталог из кастомных блоков не применяя каталог товаров. Код скрывает блоки и показывает тот блок, который выберет пользователь.

Кстати, как работать с прелоадерами, которые вы видели выше, смотри в статье - Подборка из 100+ прелоадеров на сайт

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

Больше кода для Tilda в ТГ-канале

Поблагодари за код - подпишись https://t.me/breeze_tilda