jQuery .toggleClass не работает должным образом

Question

Я создал фильтр мини-вкладок, но он работает не так корректно. Это работает только тогда, когда вы нажимаете и убираете одну вкладку за раз. Прямо сейчас, если вы щелкнете по вкладке, а затем по другой вкладке, содержимое предыдущей нажатой вкладки по-прежнему будет отображать также и предыдущую нажатую вкладку, сохраняя класс «текущий», если это не так. Я попытался исправить это с помощью JS-кода с комментариями, но это делает все это беспроблемным. Спасибо!

$(document).ready(function () {

    $('.tab').click(function () {
        var tabID = $(this).data('tabid');

        // $('.iconsContainer').children().removeClass('current');
        $(this).toggleClass('current');

        // $('.iconContainerMore').removeClass('hideMoreText');
        $('.iconContainerMore', this).toggleClass('hideMoreText');

        // $('.tripctychContent-container').children().removeClass('showText');
        $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('showTopicContent');
    });

});

.hideMoreText{
  display: none;
}

.hideTopicContent{
	display: none;
}

.showTopicContent{
    display: block;
}

.tab{
  cursor: pointer;
}
.iconsContainer{
    display: flex;
    justify-content: space-between;
}
.tab p:first-of-type{
  padding: 30px;
  background: blue;
  color: white;
}
.current p:first-of-type{
  background: black !important;
}
.tripctychContent-container p{
  background: red;
  color: white;
}
p{
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
  <a class="tab" data-tabid="topic1">
    <div>
      <p>Topic 1 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
  <a class="tab" data-tabid="topic2">
    <div>
      <p>Topic 2 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
  <a class="tab" data-tabid="topic3">
    <div>
      <p>Topic 3 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
</div>

<div class="tripctychContent-container">
  <div class="field--name-field-topic-1-content hideTopicContent" data-blockid="topic1">
    <p>Topic 1 body</p>
  </div>
  <div class="field--name-field-topic-2-content hideTopicContent" data-blockid="topic2">
    <p>Topic 2 body</p>
  </div>
  <div class="field--name-field-topic-3-content hideTopicContent" data-blockid="topic3">
    <p>Topic 3 body</p>
  </div>
</div>

Answer 1

Ваш код не удаляет current из других "вкладок" - и при этом он не удаляет hwoTopicContent из другого содержимого вкладки .. он только переключает вкладку, которую вы нажимаете

Следующие работы

$(document).ready(function () {

    $('.tab').click(function () {
        var tabID = $(this).data('tabid');
        var isCurrent = !$(this).hasClass('current');
        $('.tab').removeClass('current');
        $(this).toggleClass('current', isCurrent);

        $('.iconContainerMore').removeClass('hideMoreText');
        $('.iconContainerMore', this).toggleClass('hideMoreText', isCurrent);

        // $('.tripctychContent-container').children().removeClass('showText');
        $('.tripctychContent-container>div').removeClass('showTopicContent');
        $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('showTopicContent', isCurrent);
    });

});

.hideMoreText{
  display: none;
}

.hideTopicContent{
	display: none;
}

.showTopicContent{
    display: block;
}

.tab{
  cursor: pointer;
}
.iconsContainer{
    display: flex;
    justify-content: space-between;
}
.tab p:first-of-type{
  padding: 30px;
  background: blue;
  color: white;
}
.current p:first-of-type{
  background: black !important;
}
.tripctychContent-container p{
  background: red;
  color: white;
}
p{
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
  <a class="tab" data-tabid="topic1">
    <div>
      <p>Topic 1 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
  <a class="tab" data-tabid="topic2">
    <div>
      <p>Topic 2 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
  <a class="tab" data-tabid="topic3">
    <div>
      <p>Topic 3 title</p>
      <p class="iconContainerMore">More</p>
    </div>
  </a>
</div>

<div class="tripctychContent-container">
  <div class="field--name-field-topic-1-content hideTopicContent" data-blockid="topic1">
    <p>Topic 1 body</p>
  </div>
  <div class="field--name-field-topic-2-content hideTopicContent" data-blockid="topic2">
    <p>Topic 2 body</p>
  </div>
  <div class="field--name-field-topic-3-content hideTopicContent" data-blockid="topic3">
    <p>Topic 3 body</p>
  </div>
</div>

Answer 2

Это просто. Просто удалите все классы и установите только текущий.

$('.tab').click(function () {
  var tabID = $(this).data('tabid');

  // remove all already set classes
  $('.iconContainerMore').removeClass('hideMoreText');
  $('.tripctychContent-container').find("[data-blockid]").removeClass('showTopicContent');

  // show current
  $('.iconContainerMore', this).addClass('hideMoreText');
  $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").addClass('showTopicContent');
});