Как сделать переключатель для блока 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
Double set
A lunch set for a week / 2 persons
$70
  • Free delivery
  • Different types of sets
  • All ingredients included
  • Recipe inside
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
Double set
A lunch set for a week / 2 persons
$49
  • Free delivery
  • Different types of sets
  • All ingredients included
  • Recipe inside
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 минут
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<style>
.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>

<script>
$( document ).ready(function() {
$('#rec247690755,#rec247693093').addClass('twiceblock');
$('.twiceblock:last').hide();
$('.switcher').click(function(){
   $(this).toggleClass('switcheron');
   $('.twiceblock').toggle();
   $('.twiceblock>div').trigger('displayChanged');
   t_lazyload_update();
});
});
</script>
Made on
Tilda