Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как сделать переключатель для блока PL105 в ZeroBlock в Tilda
Monthly
Yearly 30% OFF
Choose the plan that best fits your needs
Standard set
A lunch set for a week / 1 person
$50
  • Free delivery
  • 1 type of set
  • All ingredients included
Order now
Special set
A set for a day for 1 person
$44
  • Any dish from the menu
  • Free delivery
  • All ingredients included
Order now
Standard set
A lunch set for a week / 1 person
$35
  • Free delivery
  • 1 type of set
  • All ingredients included
Order now -30% off
Special set
A set for a day for 1 person
$30.8
  • Any dish from the menu
  • Free delivery
  • All ingredients included
Order now -30% off

Как сделать переключатель для блока PL105 в ZeroBlock в Tilda

1
Создали ZeroBlock и добавили в него Shape c классом switcher
(размер 70х35, <480 35x70)
2
Добавили два блока PL105
3
Добавили код в блок Другое - Т123
И прописали в нём ID блока PL105
#rec247690755, #rec247693093
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём переключатель из шейпа в ZeroBlock и переключаем два тарифных блока PL105.
Длительность видео: 15 минут
Фрагмент видео
Библиотека для примера

<script>
(function () {
    document.addEventListener("DOMContentLoaded", function() {
        const twiceBlock = document.querySelectorAll('#rec247690755, #rec247693093');
        for(let i=0; i<twiceBlock.length; i++){
            twiceBlock[i].classList.add('twiceblock');
        };
        twiceBlock[twiceBlock.length-1].classList.add('hide-twice');
        document.querySelector(".switcher").addEventListener('click', function(event) {
            this.classList.toggle('switcheron');
            for(let i=0; i<twiceBlock.length; i++){
                twiceBlock[i].classList.toggle('hide-twice');
            };
            if(typeof LazyLoad != 'undefined') t_lazyload_update();
        });
    
        });
})();
</script>

<style>

.hide-twice {
    opacity: 0;
    overflow: hidden;
    padding: 0 !important;
    max-height: 0;
    height: 0;
    pointer-events: none;
}

.switcher .tn-atom {
    position: relative;
    cursor:pointer;
}
.switcher .tn-atom:before {
    content: "";
    background-color: #fff;
    position: absolute;
    height: 100%;
    width:50%;
    top: 0;
    border-radius:100%;
    left:0;
    transition:all 0.3s ease-in-out;
}
.switcheron  .tn-atom:before {left:50%}
.switcheron .tn-atom {
    background-color: #fcb42f !important;
    border-color: #fcb42f !important;
}




@media screen and (max-width:480px){
.switcheron  .tn-atom:before {
    left:0;
    top:50%;
}  
.switcher .tn-atom:before {
    height: 50%;
    width: 100%;
}
}
</style>
Made on
Tilda