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

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

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

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

Инструкция:

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

<script>
document.addEventListener("DOMContentLoaded", function(){
(function () {
let shmoreArr = [ '#showmore , 'uc-showmore' ]; // Ссылка кнопки - Класс блоков для скрытия
let anchor = true; //Скролл до якоря (меняем true на false, если нужен)
let hideBtn = true; //Скрыть кнопку по клику (меняем true на false, если нужен)
let hideBlk = true; //Скрыть блок с кнопкой по клику (меняем true на false, если нужен)
let shmoreBtn = document.querySelectorAll('[href="'+shmoreArr[0]+'"]');
let shmoreBlock = document.querySelectorAll('.'+shmoreArr[1]);
shmoreBlock.forEach(i => i.classList.add("tabshide"));
for (let i = 0; i < shmoreBtn.length; i++) {
    shmoreBtn[i].addEventListener('click', function(event) { 
        this.classList.toggle('more-btn-active');
        if(!anchor) event.preventDefault(); 
        if(hideBtn) this.classList.add('tabshide');
        if(hideBlk) this.closest('.r').classList.add('tabshide');
        shmoreBlock.forEach(i => i.classList.toggle("tabshide"));
        window.dispatchEvent(new Event('resize'));
   });
};
})();

});
</script>

<style>
.tabshide {
    opacity: 0!important;
    min-height: 0!important;
    max-height: 0!important;
    pointer-events: none!important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}
</style>

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

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

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

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

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

<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 и т.д. (точно такие же, как в табах категорий). И когда человек нажмет на нее, то его перебросит на соответствующий блок.

<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