Что делает скрипт

Блоки Tilda скрыты и показываются по нажатию на кнопку. Подходит и для вкладок из стандартных блоков.

Как подключить

  1. Блокам с контентом задайте классы uc-block1, uc-block2…
  2. Кнопкам поставьте ссылки #block1, #block2… согласно коду.
  3. Вставьте код в блок T123 «HTML-код» на страницу (или в «Настройки страницы» → «HTML-код для вставки внутрь head»).
  4. Опубликуйте страницу: код выполняется только на опубликованной странице.

Код

Код для вставки — часть 1 из 2
<!-- Показываем скрытый блок по нажатию на кнопку в 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>
Код для вставки — часть 2 из 2
<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.

тут нужно написать стили и js/css для того, чтобы отображались файлы скриптов