Скрытие и показ блока на Тильде по ссылке
Первым шагом добавьте в блок 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>
14 Responses
Здравствуйте.
Спасибо за код. Но есть один вопрос:
почему после нажатия на кнопку второй раз, после сворачивания блоков все улетает в подвал?
Возможно у вас в подвале лежит якорь с пустой ссылкой # — можете поделиться ссылкой на проект, я смогу ответить точнее.)
Здравствуйте! Подскажите, а как сделать что бы блок после перезагрузки страницы показывался человеку вновь? Даже если он его закрыл
Чтобы блок показывался пользователю вновь после перезагрузки страницы, даже если он его закрыл, нужно убрать сохранение состояния в localStorage. В текущем скрипте состояние скрытия блока сохраняется в localStorage с ключом isBlockHidden. Когда пользователь закрывает блок, эта информация сохраняется и используется для скрытия блока при следующем посещении страницы.
Чтобы исправить это, нужно удалить строки, отвечающие за сохранение и проверку состояния в localStorage. Вот обновлённый скрипт без использования localStorage.)
Дополнили статью 🙂
Добрый день, если пользователь скрыл блок «в localStorage с ключом isBlockHidden» То при каких условиях блок отобразиться снова?
На примере, если пользователь закрыл блок находясь на многостраничном сайте. То при переходе на другие страницы сайта, блок не будет отображаться. Но если он зайдет снова через какое-то время на мой сайт, блок все также не будет отображаться?
Может ли он отображаться если пользователь через время снова зашел на сайт, а блок был ранее им закрыт?
Добрый день.)
Если блок скрыт и его состояние сохранено в localStorage с ключом isBlockHidden, то он не будет отображаться на всех страницах сайта, пока пользователь использует тот же браузер и не очищает данные localStorage. То есть, даже если пользователь закроет блок на одной странице, перейдёт на другую или вернётся на сайт через некоторое время, блок всё равно останется скрытым, потому что информация о его состоянии сохраняется локально на устройстве пользователя.
Когда блок отобразится снова?
1. Пользователь очистит данные браузера, включая localStorage.
2. Пользователь откроет сайт в другом браузере или с другого устройства.
3. Вы удалите или измените скрипт, отвечающий за скрытие блока (например, убрав использование localStorage).
Таким образом, чтобы блок снова отображался после какого-то времени, можно, например, изменить скрипт так, чтобы состояние блока сохранялось не в localStorage, а в cookies с ограниченным сроком действия, или вовсе убрать сохранение состояния 🙂
Подскажите пожалуйста, как сделать чтобы кнопка сначала исчезла, а потом после нажатия кнопки в скрытом блоке, первая кнопка опять появлялась?
Немного сложновато понять что вы имеете ввиду без примера.)
Можете описать что вы хотите реализовать на живом примере пожалуйста? И дополним статью написав решение для вашей задачи.))
Здравствуйте, подскажите пожалуйста, как сделать чтобы при нажатии на кнопку выходил документ из нескольких pdf документов на Тильде?
Вы можете загрузить документ на Google Disk и прикрепить ссылку к кнопке, настроив её открытие в новой вкладке. Альтернативно, страницы PDF можно преобразовать в отдельные JPG-изображения и добавить всплывающее окно с фотогалереей. Для этого используйте блок всплывающей галереи с номером GL08N.
Мне надо вставить на сайте длиное «постановление» из нескольких печатных листов, которое будет открываться при нажатии на кнопку
Как это сделать на Тильде?
Можно загрузить документ на Google Disk и прикрепить ссылку на документ на кнопку с открытием в новой вкладке. Или можно сконвертировать страницы PDF документа в отдельные JPG фото и добавить всплывающее окно с галереей фото. Номер блока всплывающей галереи фото — GL08N
Здравствуйте! можно ли сделать так, чтобы при открытии блока происходил скролл до этого блока?
По умолчанию наш код теоретически и должен так работать.)
Можете сбросить сайт-пример на котором у вас не работает решение? И мы постараемся вам помочь.)