Реализация включения/выключения на 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>


Ответы (0 шт):