Как сделать показ скрытых блоков по клику на Тильде?
Показ блока
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Значения, которые были введены
1. В генераторе указываешь:
  • «id блоков»– Укажи id блока, который хочешь скрывать или показывать. Можно указать несколько через запятую и пробел (#rec00001, #rec00001)
  • «Ссылка для показа/скрытия» – Пропиши название ссылки через # и после укажи ее в настройках элемента, который будет открывать/скрывать блок (текст, картинка, кнопка или шейп (например, hsblock);
  • «Изначально» – Выбери условия, сразу показывать или скрывать блок;
  • «Анимация скрытия/показа блока» – Выбери эффект появления/скрытия;
  • «id блока к которому будет скролл после открытия»
  • «id блока к которому будет скролл после закрытия»;

2. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;

  • ВАЖНО: Если используется анимация «Слайдом» для нескольких блоков, то фоны скрываемых или появляющихся блоков должны быть одинаковыми, иначе будут видны разрывы между блоками в момент появления/скрытия
Як на картинке
<!--NOLIM--><!--NLM061--><!--settings{"blockId":"#rec893743384","hsLink":"#hsblock","onPageLoad":"1","hsAnimation":"0","scrollAfterShow":"#rec893743384","scrollAfterShowType":"0","scrollAfterShowMargin":"","scrollAfterHide":"#rec893707222","scrollAfterHideType":"0","scrollAfterHideMargin":"","changeText":{"openText":"Показать","closeText":"Скрыть"}}settingsend--><!--ts1741860773262ts--> <script> (function() { if (!window.nlm061obj) { window.nlm061obj = { blocksHideOnLoadPage: [] } } function t_ready(e) { "loading" != document.readyState ? e() : document.addEventListener ? document.addEventListener("DOMContentLoaded", e) : document.attachEvent("onreadystatechange", (function() { "loading" != document.readyState && e() })) } 			function hasClassStartingWith(element, prefix) { 				return Array.from(element.classList).some(className => className.startsWith(prefix)); 			} t_ready((function() { let hs = setInterval(function() { let hsBlockList = document.querySelectorAll('[href="#hsblock"]'); if (hsBlockList.length > 0) { clearInterval(hs); let block = document.querySelectorAll('#rec893743384'); let blockIdList = []; block.forEach(function(item) { blockIdList.push(item.id); }); let openText = "Показать"; 			 let closeText = "Скрыть"; function setText(textType) { let text = textType == "open" ? openText : closeText; hsBlockList.forEach(function(item) { 								let tdElement = item.querySelector('td'); 								if(item.closest('.t650__inner-col')) { 									const parentElement = item.closest('.t650__inner-col'); 									if(parentElement) { 										const button = parentElement.querySelector('.t-card__btn'); 										if(button) { 											button.innerHTML = text; 										} 									} 								} if (item.querySelector("span")) { item.querySelector("span").innerHTML = text; } if (item.closest('[data-elem-type="button"]') || item.closest('[data-elem-type="text"]')) { item.innerHTML = text; } 								if(tdElement) { 									tdElement.innerHTML = text; 								} }); } let t = 0; block.forEach(function(e) { window.nlm061obj.blocksHideOnLoadPage.push("#" + e.id); if (e.hasAttribute("nlm087slider-id")) { let sldId = e.getAttribute("nlm087slider-id"); e.closest(`#rec${sldId}nlm`).classList.add("nolimAutoScaleFix061"); e.closest(`#rec${sldId}nlm`).classList.add("nlm061-hide"); } else { 								e.classList.add("nolimAutoScaleFix061"); 								e.classList.add("nlm061-hide"); } }); setText("close"); function getParents(el) { var parents = []; var p = el.parentNode; let htmlBlk = document.querySelector('html'); while (p !== htmlBlk) { var o = p; if (o.classList.contains('t-rec')) { parents.push(o); } p = o.parentNode; } return parents; } let isClicked = true; let intervalAllowed = true; let padTopInit = 0; let padBotInit = 0; block.forEach(function(block) { if (block.style.paddingTop) { padTopInit = parseInt(block.style.paddingTop, 10); } if (block.style.paddingBottom) { padBotInit = parseInt(block.style.paddingBottom, 10); } }); var slideHideShowObj = { slideUp: function(element, duration = 500) { isClicked = false; return new Promise(function(resolve, reject) { element.style.height = (element.offsetHeight - padTopInit - padBotInit) + 'px'; element.style.transitionProperty = 'height, margin, padding'; element.style.transitionDuration = duration + 'ms'; element.offsetHeight; element.style.overflow = 'hidden'; element.style.height = 0; element.style.paddingTop = 0; element.style.paddingBottom = 0; element.style.marginTop = 0; element.style.marginBottom = 0; window.setTimeout(function() { 											element.classList.add('nolimAutoScaleFix061'); 											element.classList.add('nlm061-hide'); 											element.style.removeProperty('height'); 											element.style.removeProperty('padding-top'); 											element.style.removeProperty('padding-bottom'); 											element.style.removeProperty('margin-top'); 											element.style.removeProperty('margin-bottom'); 											element.style.removeProperty('overflow'); 											element.style.removeProperty('transition-duration'); 											element.style.removeProperty('transition-property'); 											resolve(false); 											isClicked = true; }, duration); }); }, slideDown: function(element, duration = 500) { isClicked = false; return new Promise(function(resolve, reject) { element.style.removeProperty('display'); if (element.classList.contains('nolimAutoScaleFix061')) { element.classList.remove('nolimAutoScaleFix061'); element.classList.remove('nolimAutoScaleFix113'); } element.classList.add('nlm061-open'); offsetHeight = element.offsetHeight; let height = offsetHeight - padTopInit - padBotInit; element.style.overflow = 'hidden'; element.style.height = 0; element.style.paddingTop = 0; element.style.paddingBottom = 0; element.style.marginTop = 0; element.style.marginBottom = 0; element.offsetHeight; element.style.transitionProperty = 'height, margin, padding'; element.style.transitionDuration = duration + 'ms'; element.style.height = height + 'px'; element.style.removeProperty('padding-top'); element.style.removeProperty('padding-bottom'); element.style.removeProperty('margin-top'); element.style.removeProperty('margin-bottom'); window.setTimeout(function() { element.style.removeProperty('height'); element.style.removeProperty('overflow'); element.style.removeProperty('transition-duration'); element.style.removeProperty('transition-property'); isClicked = true; }, duration); }); }, slideToggle: function(element, duration = 500) { if (element.classList.contains('nolimAutoScaleFix061')) { return this.slideDown(element, duration); } else { return this.slideUp(element, duration); } } }; function checkIsBlockASlider(blk, type, state) { if (blk.hasAttribute("nlm079slider-id")) { if (blk.classList.contains("activeSlide")) { if (type == "standart" && state == "toopen") { blk.classList.remove('nolimAutoScaleFix061'); blk.classList.remove('nolimAutoScaleFix113'); blk.classList.add('nlm061-open'); blk.style.display = "block"; } else if (type == "standart" && state == "toclose") { 											blk.classList.add('nolimAutoScaleFix061'); 											blk.classList.add('nlm061-hide'); } else { slideHideShowObj.slideToggle(blk); } } else { let sliderId = blk.getAttribute("nlm079slider-id"); document.querySelectorAll(`[nlm079slider-id="${sliderId}"]`).forEach(function(item) { if (item.classList.contains("activeSlide")) { if (type == "standart" && state == "toopen") { item.classList.remove('nolimAutoScaleFix061'); item.classList.remove('nolimAutoScaleFix113'); item.classList.add('nlm061-open'); item.style.display = "block"; } else if (type == "standart" && state == "toclose") { 												item.classList.add('nolimAutoScaleFix061'); 												item.classList.add('nlm061-hide'); } else { slideHideShowObj.slideToggle(item); } } }); } } else { if (blk.hasAttribute("nlm087slider-id")) { let sldId = blk.getAttribute("nlm087slider-id"); blk = blk.closest(`#rec${sldId}nlm`); } if (type == "standart" && state == "toopen") { blk.classList.remove('nolimAutoScaleFix061'); blk.classList.remove('nolimAutoScaleFix113'); 									console.log('blk2',blk); blk.classList.add('nlm061-open'); blk.style.display = "block"; } else if (type == "standart" && state == "toclose") { 									blk.classList.add('nolimAutoScaleFix061'); 									blk.classList.add('nlm061-hide'); } else { slideHideShowObj.slideToggle(blk); } } } function checkSlideToggle(slideElem) { if (isClicked) { slideElem.forEach(function(e) { checkIsBlockASlider(e); }); } else if (isClicked == false && intervalAllowed == true) { intervalAllowed = false; let int = setInterval(function() { if (isClicked) { clearInterval(int); intervalAllowed = true; slideElem.forEach(function(e) { checkIsBlockASlider(e); }); } }, 10); } } function forAutoscaleMode() { "y" === window.lazy && t_lazyload_update(); block.forEach(function(block) { typeof t_slds_updateSlider != "undefined" && t_slds_updateSlider(block.getAttribute("id").replace("rec", "")); if (block && block.getAttribute("data-record-type") == 396) { t396_doResize(block.getAttribute("id").replace("rec", "")); } }); if (window.CustomEvent && typeof window.CustomEvent === 'function') { var myCustomEvent = new CustomEvent('displayChanged'); } else { var myCustomEvent = document.createEvent('CustomEvent'); myCustomEvent.initCustomEvent('displayChanged', true, true); } block.forEach(function(block) { block.dispatchEvent(myCustomEvent); }); } function scrollTo(elem, type) { 							let rect = elem.getBoundingClientRect(); let elementPosition = rect.top + window.pageYOffset; window.scrollTo({ top: elementPosition, behavior: 'smooth' }); } function scrollToWithMargin(elem, margin) { let rect = elem.getBoundingClientRect(); let elementPosition = rect.top + window.pageYOffset; let offsetPosition = elementPosition - margin; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } let stylesNlm129 = document.querySelector('.styles__nlm129'); let clickEv = function(e) { e.preventDefault(); if (0 == t) { checkSlideToggle(block); block.forEach(function(item) { 									item.classList.remove("nlm061-hide"); 									item.classList.add("nlm061-open"); }); forAutoscaleMode(); t = 1; setText("open"); let element = document.querySelector("#rec893743384"); setTimeout(function() { scrollTo(element, "start"); }, 600); } else { if (1 == t) { checkSlideToggle(block); block.forEach(function(item) { 										item.classList.remove("nlm061-open"); 										item.classList.add("nlm061-hide"); 					}); forAutoscaleMode(); t = 0; setText("close"); let element = document.querySelector("#rec893707222"); setTimeout(function() { scrollTo(element, "start"); }, 600); } } if(stylesNlm129) { setTimeout(() => { console.log('q'); window.dispatchEvent(new Event('resize')); },1000); } }; hsBlockList.forEach(function(item) { let parentsList = getParents(item); parentsList.forEach(function(elem) { let childList = elem.querySelectorAll('[href="#hsblock"]'); let tildaFuncChangeCount = 0; childList.forEach(function(w) { w.removeEventListener('click', clickEv); w.addEventListener('click', clickEv); if (w.closest(".t-rec").getAttribute("data-record-type") == 649 || w.closest(".t-rec").getAttribute("data-record-type") == 336) { w.style.pointerEvents = "none"; } }); }); }); }; }, 50); })); })(); </script> <style> .t-cards__col { cursor: pointer; } 		.t994__item { 			width: auto !important; 		} [id*="collabza_rec"] { display: flex !important; } .nolimAutoScaleFix061 { opacity: 0!important; height: 0!important; max-height: 0!important; min-height: 0!important; pointer-events: none!important; overflow: hidden!important; padding-top: 0!important; padding-bottom: 0!important; } </style>