Скрытие и показ блока на Тильде по ссылке
Первым шагом добавьте в блок 123 на Тильде следующий код.
<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>
Вторым шагом закрепите на кнопке или нужном вам элементе зеро-блока по клику на который будет закрываться блок ссылку #showmore
После завершения всех шагов инструкции, по первому клику на этот элемент блок будет пропадать, а по второму клику — появляться.
Третьим шагом нужно добавить к блокам которые мы хотим скрыть следующий класс — uc-showmore
Если хотим скрыть стандартный блок, нужно добавить название класса в настройках блока
Если хотим скрыть отдельные элементы в Zero-block, то нажимаем правым кликом в редакторе Зероблока.
Финальным шагом сохраняем изменения и публикуем страницу. Код будет работать только на опубликованной странице, в режиме предпросмотра изменений не будет видно.
Как сделать кнопку закрытия для любого блока на Тильде
Второй вариант кода подойдёт например для блока с акцией. Он позволит сделать любой выбранный вами элемент кнопкой закрытия для любого выбранного вами блока.
Первым шагом добавьте в блок 123 на Тильде код предоставленный ниже.
<script>
document.addEventListener("DOMContentLoaded", function() {
(function() {
let shmoreArr = ['#showmore', 'uc-showmore'];
let anchor = true;
let hideBtn = false;
let hideBlk = false;
let shmoreBtn = document.querySelectorAll('[href="'+shmoreArr[0]+'"]');
let shmoreBlock = document.querySelectorAll('.'+shmoreArr[1]);
let isBlockHidden = localStorage.getItem('isBlockHidden') === 'true';
shmoreBlock.forEach(i => {
if (isBlockHidden) {
i.classList.add('tabshide');
} else {
i.classList.remove('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"));
localStorage.setItem('isBlockHidden', shmoreBlock[0].classList.contains('tabshide'));
window.dispatchEvent(new Event('resize'));
});
};
})();
});
</script>
<style>
.tabshide {
opacity: 0!important;
max-height: 0!important;
pointer-events: none!important;
overflow: hidden !important;
}
</style>
Вторым шагом добавьте на кнопку или нужный вам элемент зеро-блока по клику на который будет закрываться блок или скрываться элемент ссылку #showmore
После завершения всех шагов инструкции, по первому клику на этот элемент блок будет пропадать, а по второму клику — появляться.
Третьим шагом нужно добавить к блокам которые мы хотим скрыть следующий класс — uc-showmore
Если хотим скрыть определенные элементы в Zero-block, то нажимаем правым кликом в редакторе Зероблока.
Если хотим скрыть стандартный блок или зероблок целиком, нужно добавить название класса в настройках блока
Финальным шагом сохраняем изменения и публикуем страницу. Теперь если клиент вашего сайта закроет блок, он больше не будет ему появляться.
Код будет работать только на опубликованной странице, в режиме предпросмотра изменений не будет видно.
Дополнение:
Чтобы блок показывался пользователю вновь после перезагрузки страницы, даже если он его закрыл, нужно убрать сохранение состояния в localStorage. В текущем скрипте состояние скрытия блока сохраняется в localStorage с ключом isBlockHidden. Когда пользователь закрывает блок, эта информация сохраняется и используется для скрытия блока при следующем посещении страницы.
Чтобы изменить это, нужно удалить строки, отвечающие за сохранение и проверку состояния в localStorage. Вот обновлённый скрипт без использования localStorage:
<script>
document.addEventListener("DOMContentLoaded", function() {
(function() {
let shmoreArr = ['#showmore', 'uc-showmore'];
let anchor = true;
let hideBtn = false;
let hideBlk = false;
let shmoreBtn = document.querySelectorAll('[href="'+shmoreArr[0]+'"]');
let shmoreBlock = document.querySelectorAll('.'+shmoreArr[1]);
shmoreBlock.forEach(i => {
// Убираем проверку на сохраненное состояние
i.classList.remove('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"));
// Убираем сохранение состояния в localStorage
window.dispatchEvent(new Event('resize'));
});
};
})();
});
</script>
<style>
.tabshide {
opacity: 0!important;
max-height: 0!important;
pointer-events: none!important;
overflow: hidden !important;
}
</style>
