Показ скрытого блока на Тильде
Я скрытый текстовый блок, который показался при нажатии на любую кнопку!
Скрываем любой блок в Тильде и показываем его при нажатии на любую кнопку.
Инструкция:
Инструкция:
- Добавили кнопку / текст с ссылкой при нажатии по которой будет показываться наш скрытый блок
- Задали кнопке якорную ссылку вида: #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
let hideBtn = true; //Скрыть кнопку по клику true
let hideBlk = true; //Скрыть блок с кнопкой по клику 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>
Можно поменять значения в функциях:
- Скролл до якоря
- Скрыть кнопку по клику
- Скрыть блок с кнопкой по клику