javascript - jQuery toggle class not working correctly

Question

I created a simple tab filter, but I can't get it to work correctly. When the page first reloads i want the tab content to be hidden and I want the "more" to show on all the tabs, so far that's working. When you click on "more" the tab content should display, and "more" for that current tab should be hidden. I also need the tabs to toggle so i you click the tab again it should hide the tab content and show "more". Right now that issues that i'm having are that when you click on a tab the tab content of the other tabs show, but not the content of that tab, and also "more" doesn't show unless you click on another tab. Thanks!!

$(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

HERE!

just update the 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');
      });

  });