Смена блока через тогл (для тарифов)

Модификатор позволяет переключать блоки нажатием на тогл или текст

Открыть шаблон

Главная

Коллекция

Инструкция по настройке

Шаблон страницы

Как добавить шаблон

61547775

Для корректной работы модификаций подключите библиотеку jQuery:

Настройки сайта -> Еще -> Подключить jQuery на страницах сайта

jQuery

Добавляем блок T123 и копируем в него код

1 шаг

Скопировать код

Создаем Zero Block и открываем редактор

Верстаем первую версию (например, для тарифа на месяц)
Задаем кнопкам для переключения класс toggle-btn
Задаем класс блоку uc-tariff-m

2 шаг

Копируем Zero Block с первым тарифом

Обновляем контент для второго тарифа (например, на год)
Задаем кнопкам для переключения класс toggle-btn
Задаем класс блоку uc-tariff-y

3 шаг

<!--SH11 - Модификация для Тильды. Смена блока через тогл (для тарифов) https://mod.tistols.com/smena-bloka -->
<style>
    .toggle-btn {
        user-select: none;
        cursor: pointer;
    }

    .hid {
        position: absolute;
        left: -5000px;
    }
</style>

<script>
    $(function(){
        var mt = $('.uc-tariff-m');
        var yt = $('.uc-tariff-y');
        yt.addClass('hid'); // Скрываем Yearly при загрузке

        $('.toggle-btn').click(function(){
            console.log("Клик по кнопке, переключаем блоки");

            $('.uc-tariff-m, .uc-tariff-y').toggleClass('hid');
        });
    });
</script>

Вам также может быть интересно: