Как сделать показ скрытых блоков по клику на любую кнопку или ссылку в Tilda
HVOYA
We organise dream holidays to breathtaking places all over the world. Choose from our special destinations or suggest your own
HVOYA
HVOYA
More products
More products
More products

Как сделать показ скрытых блоков по клику на любую кнопку или ссылку в Tilda

1
Создали блок с кнопкой и задали ей ссылку #showmore
2
Блокам, которые нужно скрыть/показать - задали класс uc-showmore
3
Добавили блок Т173 Якорная ссылка и задали ей значение - showmore
Добавили блок T178 - модификатор плавного скролла
4
Добавили код на страницу в блок Т123
К коде задаётся ссылка кнопки и класс блоков, которые от неё зависят
[ '#showmore' , 'uc-showmore' ];
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Показ и скрытие блоков при клике на элементы , содержащие заданную ссылку
Фрагмент видео
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function(){
(function () {
let shmoreArr = [ '#showmore' , 'uc-showmore' ]; // Ссылка кнопки - Класс блоков для скрытия
let anchor = true; //Скролл до якоря true
let hideBtn = false; //Скрыть кнопку по клику true
let hideBlk = false; //Скрыть блок с кнопкой по клику true
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>
Made on
Tilda