Отображение скрытого блока на Тильде

Я скрытый текстовый блок, который показался при нажатии на любую кнопку!

Скрываем любой блок сайта на Тильде и показываем его при нажатии на любую кнопку. При нажатии кнопки включить отображение блоков тильда

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

Инструкция:

Добавили кнопку / текст с ссылкой при нажатии по которой будет показываться наш скрытый блок
Задали кнопке якорную ссылку вида: #example (подставляем любое другое значение)
Добавили любой блок и задали ему CSS класс вида: uc-showmore (подставляем любое другое значение, начинающиеся с uc-)
Добавили в блок T123 код ниже, заменив значения ссылки и класса в строке let shmoreArr = [ '#showmore' , 'uc-showmore' ];

<!-- Показать больше через скрытие/показ контента. https://t.me/breeze_tilda -->

<script>
(function () {
  var buttonSelector = 'a[href="#showmore"]';
  var blockSelector = '.uc-showmore';

  function init() {
    var buttons = document.querySelectorAll(buttonSelector);
    var blocks = document.querySelectorAll(blockSelector);

    blocks.forEach(function (block) {
      block.style.setProperty('display', 'none', 'important');
    });

    buttons.forEach(function (button) {
      button.addEventListener('click', function (event) {
        event.preventDefault();

        blocks.forEach(function (block) {
          block.style.setProperty('display', 'block', 'important');
        });

        button.style.setProperty('display', 'none', 'important');

        var parentBlock = button.closest('.r');

        if (parentBlock) {
          parentBlock.style.setProperty('display', 'none', 'important');
        }

        window.dispatchEvent(new Event('resize'));

        setTimeout(function () {
          if (blocks[0]) {
            blocks[0].scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            });
          }
        }, 100);
      });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

Показать/скрыть несколько блоков по нажатию на кнопки Тильда

Делаем из блоков категории.
Несколько кнопок - заголовки наших категорий. При клике показываем блок в зависимости от того, какая кнопка нажата: при нажатии на первую кнопку - показывается первый блок, а при нажатии на 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>
(function () {
  var cats = ['circle', 'dots', 'gear', 'pulse', 'other'];

  function getBlock(cat) {
    return document.querySelector('.uc-' + cat);
  }

  function hideAllBlocks() {
    cats.forEach(function (cat) {
      var block = getBlock(cat);

      if (block) {
        block.style.setProperty('display', 'none', 'important');
      }
    });
  }

  function showBlock(cat, scroll) {
    hideAllBlocks();

    var block = getBlock(cat);

    if (!block) {
      return;
    }

    block.style.setProperty('display', 'block', 'important');

    window.dispatchEvent(new Event('resize'));

    if (scroll) {
      setTimeout(function () {
        block.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }, 100);
    }
  }

  function init() {
    hideAllBlocks();

    document.addEventListener('click', function (event) {
      var link = event.target.closest('a');

      if (!link) {
        return;
      }

      var href = link.getAttribute('href');

      if (!href || href.charAt(0) !== '#') {
        return;
      }

      var cat = href.substring(1);

      if (!cats.includes(cat)) {
        return;
      }

      event.preventDefault();
      event.stopPropagation();

      showBlock(cat, true);

      history.pushState(null, '', '#' + cat);
    }, true);

    var currentHash = window.location.hash.substring(1);

    if (cats.includes(currentHash)) {
      showBlock(currentHash, false);
    }

    window.addEventListener('popstate', function () {
      var hash = window.location.hash.substring(1);

      if (cats.includes(hash)) {
        showBlock(hash, true);
      } else {
        hideAllBlocks();
      }
    });

    /*
      Если нужно показывать первый блок сразу,
      раскомментируйте строку ниже:

      showBlock(cats[0], false);
    */
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</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