Блоки Tilda скрыты и показываются по нажатию на кнопку. Подходит и для вкладок из стандартных блоков.
uc-block1, uc-block2…#block1, #block2… согласно коду.<!-- Показываем скрытый блок по нажатию на кнопку в Tilda -->
<!-- https://youx.agency/pokazyvaem-skrytyj-blok-po-nazhatiyu-na-knopku-v-tilda -->
<style>
/*Скрываем наши блоки по ID*/
.uc-block001, .uc-block01, .uc-block1, .uc-block002, .uc-block02, .uc-block2, .uc-block003, .uc-block03, .uc-block3, .uc-block004, .uc-block04, .uc-block4 {
display: none;
}
/* Стиль для активной вкладки */
.tab-active {
background-color: #ddd; /* Измените на нужный стиль */
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Функция для управления вкладками
function showTab(selectedBlock, selectedButton) {
// Проверяем, является ли выбранная вкладка уже активной
if ($(selectedButton).hasClass('tab-active')) {
// Если вкладка активна, сворачиваем её и убираем класс активной вкладки
$(selectedBlock).slideUp(500);
$(selectedButton).removeClass('tab-active');
} else {
// Скрываем все блоки
$('.uc-block001, .uc-block01, .uc-block1, .uc-block002, .uc-block02, .uc-block2, .uc-block003, .uc-block03, .uc-block3, .uc-block004, .uc-block04, .uc-block4').hide();
// Показываем выбранный блок
$(selectedBlock).slideDown(500);
// Убираем класс активной вкладки со всех кнопок
$('[href^="#block"]').removeClass('tab-active');
// Добавляем класс активной вкладки к выбранной кнопке
$(selectedButton).addClass('tab-active');
}
// Обновляем ленивую загрузку (если необходимо)
t_lazyload_update();
}
// Обработчики для кнопок
$('[href="#block1"]').click(function(event) {
event.preventDefault();
showTab('.uc-block001, .uc-block01, .uc-block1', this);
});
$('[href="#block2"]').click(function(event) {
event.preventDefault();
showTab('.uc-block002, .uc-block02, .uc-block2', this);
});
$('[href="#block3"]').click(function(event) {
event.preventDefault();
showTab('.uc-block003, .uc-block03, .uc-block3', this);
});
$('[href="#block4"]').click(function(event) {
event.preventDefault();
showTab('.uc-block004, .uc-block04, .uc-block4', this);
});
});
</script>
<style>
.t776__imgwrapper, .t776__bgimg {
border-radius: 10px !important;
overflow: hidden;
}
.t265__wrapper {
border-radius: 10px 10px 0px 0px !important;
overflow: hidden;
}
.t431__table {
border-radius: 0px 0px 10px 10px !important;
overflow: hidden;
}
</style>
<script>
/*чтобы меню останавливалось там, где оно установлено на странице в редакторе*/
const main = (artboard) => {
const artboardHeight = artboard.getBoundingClientRect().height;
$(window).scroll(() => {
const containerBounds = artboard.parentElement.getBoundingClientRect();
artboard.style.position = containerBounds.y+artboardHeight < window.innerHeight ? "relative" : "fixed";
})
}
$(() => {
const artboard = document.querySelector(".uc-central-callback .t396__artboard");
if(artboard.classList.contains("rendered"))
main(artboard);
else
artboard.addEventListener("artBoardRendered", () => main(artboard));
})
</script>
Идея и скрипт: youx.agency.