Реализация включения/выключения на Jquery
Написал скрипт, при нажатии на который будет открываться таб. Всё работает. Думал напишу функцию, которая будет закрывать таб. Написал, не работает. В чём проблема? Сам я новичок в js, применил простой копипаст и интуитивно поменял значения. Сильно не ругайтесь.
$(document).ready(function () {
$(".tabs-2-triggers__item").click(function (e) {
e.preventDefault();
$(".tabs-2-triggers__item").removeClass("tabs-2-triggers__item--active");
$(".tabs-2-content__item").removeClass("tabs-2-content__item--active");
$(this).addClass("tabs-2-triggers__item--active");
$($(this).attr("href")).addClass("tabs-2-content__item--active");
});
// Вкл/выкл
$(".tabs-2-triggers__item--active").click(function (e) {
e.preventDefault();
$(".tabs-2-triggers__item").removeClass(this);
$(".tabs-2-content__item").removeClass(this);
console.log("Сработало");
$(this).removeClass("tabs-2-triggers__item--active");
$($(this).attr("href")).removeClass("tabs-2-content__item--active");
});
});
.tabs-2-triggers {
display: flex;
}
.tabs-2-triggers__item {
color: #000;
text-align: center;
padding: 20px;
text-decoration: none;
flex-grow: 1;
}
.tabs-2-triggers__item--active {
background: #eee;
}
.tabs-2-content__item {
display: none;
background: #eee;
padding: 20px;
}
.tabs-2-content__item--active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="dedic-nav">
<div class="dedic-filter">
<div class="tabs-2-triggers">
<a href="#tab-2-1" class="tabs-2-triggers__item">TAB 1</a>
</div>
</div>
</div>
<div class="dedic-filters">
<div class="tabs-2">
<div class="tabs-2-content">
<div id="tab-2-1" class="tabs-2-content__item">Контент 1</div>
</div>
</div>
</div>