Класс переключения JQuery не работает правильно

Question

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

$(document).ready(function () {

    $('.tab').click(function () {
        var tabID = $(this).data('tabid');
    
        $('.iconsContainer').children().removeClass('current');
        $(this).addClass('current');
    
        $('.tripctychContent-container').children().toggleClass('hideText');

        $('.iconContainerMore').removeClass('hideText');
        $('.iconContainerMore', this).toggleClass('hideText');
      
    
        $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('hideText');
      });
      
  });

.hideText{
  display: none;
}

.tab{
  cursor: pointer;
}
.iconsContainer{
    display: flex;
    justify-content: space-between;
}
.tab  p:first-of-type:hover{
  background: black;
}
.tab p:first-of-type{
  padding: 15px 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 hideText" data-blockid="topic1">
          <p>Topic 1 body</p>
        </div>
        <div class="field--name-field-topic-2-content hideText" data-blockid="topic2">
          <p>Topic 2 body</p>
        </div>
        <div class="field--name-field-topic-3-content hideText" data-blockid="topic3">
          <p>Topic 3 body</p>
        </div>
      </div>

Answer 1

Вам не нужно явно removeClass, если вы уже используете toggleClass для того же.

Answer 2

ЗДЕСЬ!

просто обновите JS:

$(document).ready(function () {

    $('.tab').click(function () {
        var tabID = $(this).data('tabid');
        //alert(tabID);
        $('.iconsContainer').children().removeClass('current');
        $(this).addClass('current');

        //$('.tripctychContent-container').toggleClass('hideText');

        $('.iconContainerMore').removeClass('hideText');
        $('.iconContainerMore', this).toggleClass('hideText');
        $( ".tripctychContent-container>div").hide();
        $( ".tripctychContent-container>div[data-blockid=" + tabID + " ]" ).show();

        $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('hideText');
      });

  });

Answer 3

Небольшое изменение в вашей функции JS в конце.

$(document).ready(function () {

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

        $('.iconsContainer').children().removeClass('current');
        $(this).addClass('current');

        $('.tripctychContent-container').children().toggleClass('hideText');

        $('.iconContainerMore').removeClass('hideText');
        $('.iconContainerMore', this).toggleClass('hideText');

        $('.field-class').hide()
        $("[data-blockid=" + tabID + "]").show();

      });      
  });

И назначьте общий класс для всего содержимого вкладки

<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-class hideText" data-blockid="topic1">
      <p>Topic 1 body</p>
    </div>
    <div class="field-class hideText" data-blockid="topic2">
      <p>Topic 2 body</p>
    </div>
    <div class="field-class hideText" data-blockid="topic3">
      <p>Topic 3 body</p>
    </div>
  </div>

Надеюсь, это поможет!