Здравствуйте! Столкнлся с проблемой реализации переключения табов с 2 вкладками на checkbox, ну чтобы когда показывалась 1 вкладка, а когда пользователь нажимал на checkbox чтобы открывалась вторая вкладка и закрывалась первая. Пробовал делать подобным образом, но не работает((
<div class="tabs">
<label class="checkbox">
<span class="checkbox__left">НТВ+</span>
<input type="checkbox">
<span class="checkbox__item"></span>
<span class="checkbox__right">Триколор ТВ</span>
</label>
<div class="tabs__box visible">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</div>
<div class="tabs__box">Далеко-далеко за словесными горами .</div>
</div>
CSS(Sass)
input[type="checkbox"]
display: none
&:checked + .checkbox__item
&::before
left: 73px
.checkbox
&__item
width: 141px
height: 36px
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.56)
border-radius: 15px
background-color: #064fb2
display: inline-block
background-image: linear-gradient(86deg, #05a8a5 0%, rgba(5, 168, 165, 0) 100%)
position: relative
display: inline-block
vertical-align: middle
margin-left: 16px
transition: all 0.2s ease
&::before
content: ''
background-image: url(../img/checkbox.png)
background-size: cover
background-position: center
position: absolute
width: 70px
height: 36px
left: 0
top: 50%
transform: translateY(-50%)
cursor: pointer
transition: all 0.2s ease
&__left
font-family: "OSB", sans-serif
font-size: 24px
line-height: em(22px)
color: #cccccc
display: inline-block
vertical-align: middle
&__right
font-family: "OSB", sans-serif
font-size: 24px
line-height: em(22px)
color: #0066cc
display: inline-block
vertical-align: middle
margin-left: 13px
JS
$(function() {
$('.tabs').find('.tabs__box:not(.visible)').hide();
$('..checkbox').delegate('.checkbox__item:not(.checkbox__item:checked)', 'click', function() {
$(this).parents('.tabs').find('.tabs__box').hide().eq($(this).index()).fadeIn(450);
})
})
Заранее благодарен за любую помощь!