Мультиязычный лендинг на Taplink

Код вставляет две кнопки, "RU" и "EN" в таплинк, переключение которых меняет видимость созданных вами секций. Выбор сохраняется в браузере, так что для мультистраничных и мультиязычных таплинков выбор языка будет сохраняться тоже.

Правила вставки: создайте 2 секции в таплинке, английскую сверху и русскую снизу.

Если у вас в таплинке не было раньше никакого когда, изпользующего jQuery, инициируйте его, вставив либо в настройки аккаунта, либо в начале кода строчку

Видеоинструкция: https://youtu.be/NMxcaBilXQg

Код:

<style>
  body {
position:relative;
}
html:not(.is-app) .blocks-section:nth-child(2) {
display:none;
}
  .lang-changer {
  position: fixed;
  right: 2rem;
  top:2rem;
  display:flex;
}
@media (min-width: 768px) {
  .lang-changer {
  right: 50%;
    transform: translateX(calc(50% + 380px));
}
}
.lang-changer p {
  margin: 0 5px;
  font-size:20px;
  display:flex;
  align-items:center;
}
.lang-changer p:not(.lang-active) {
  cursor:pointer;
}
.lang-active {
  background: white;
  padding: 5px 2px;
  border-radius: 3px;
  color: black;
  pointer-events:none;
}


</style>
<script>
$(window).scrollTop($(window).scrollTop()+1);
$('body').append(`<div class="lang-changer"><p class="lang-active rus">RU</p><p class="eng">EN</p></div>`)
$('.rus').click(function(e) {
  $('.lang-active').removeClass('lang-active')
  $('.rus:not(.lang-active)').addClass('lang-active')
  $('.blocks-section:nth-child(2)').hide()
  $('.blocks-section:nth-child(3)').show()
  localStorage.setItem('lang', 'rus');
  })
  $('.eng').click(function(e) {
  $('.lang-active').removeClass('lang-active')
  $('.eng:not(.lang-active)').addClass('lang-active')
  $('.blocks-section:nth-child(3)').hide()
  $('.blocks-section:nth-child(2)').show()
  localStorage.setItem('lang', 'eng');
  })
  let lang = localStorage.getItem('lang');
if (lang == 'eng') {$('.eng').click()}
</script>