Не удается скрыть элемент, когда родительский элемент в данный момент активен с помощью jQuery

Question

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

$(document).ready(function() {

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

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

    //hide "more" when you are currently on that tab
    $('.iconContainerMore').addClass('hideMoreText');

    $('.tripctychContent-container').children().hide();

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

});

.field--name-field-topic-2-content,
.field--name-field-topic-3-content {
  display: none;
}

.hideMoreText {
  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: 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" data-blockid="topic1">
    <p>Topic 1 body</p>
  </div>
  <div class="field--name-field-topic-2-content" data-blockid="topic2">
    <p>Topic 2 body</p>
  </div>
  <div class="field--name-field-topic-3-content" data-blockid="topic3">
    <p>Topic 3 body</p>
  </div>
</div>

Answer 1

Попробуйте, используя closest(), чтобы получить элементы при нажатии.

$('.tab').click(function() {

  $('.iconContainerMore').removeClass('hideMoreText');
  $('.tab.current').removeClass('current');
  $(this).addClass('current').find('.iconContainerMore').addClass('hideMoreText');

  var tabID = $(this).data('tabid');
  $('.tripctychContent-container div').addClass('hideMoreText');
  $('.tripctychContent-container').find("[data-blockid=" + tabID + "]").removeClass('hideMoreText');

});

.hideMoreText {
  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: 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 current" data-tabid="topic1">
    <div>
      <p>Topic 1 title</p>
      <p class="iconContainerMore hideMoreText">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" data-blockid="topic1">
    <p>Topic 1 body</p>
  </div>
  <div class="field--name-field-topic-2-content hideMoreText" data-blockid="topic2">
    <p>Topic 2 body</p>
  </div>
  <div class="field--name-field-topic-3-content hideMoreText" data-blockid="topic3">
    <p>Topic 3 body</p>
  </div>
</div>

Answer 2

При добавлении this к вашему выбору jQuery будут скрыты только еще в контексте нажатия на вкладку

$('.iconContainerMore').removeClass('hideMoreText');
$('.iconContainerMore', this).addClass('hideMoreText');

Примечание. все больше видимы, а затем выполните этот

фрагмент, прикрепленный для ссылки

$(document).ready(function () {

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

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

    //hide "more" when you are currently on that tab
    $('.iconContainerMore').removeClass('hideMoreText');
    $('.iconContainerMore', this).addClass('hideMoreText');

    $('.tripctychContent-container').children().hide();

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

});

.field--name-field-topic-2-content, .field--name-field-topic-3-content  {
	display: none;
}

.hideMoreText{
  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: 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 hideMoreText">More</p>
            </div>
        </a>
        <a class="tab" data-tabid="topic2">
            <div>
                <p>Topic 2 title</p>
                <p class="iconContainerMore hideMoreText">More</p>
            </div>
        </a>
        <a class="tab" data-tabid="topic3">
            <div>
                <p>Topic 3 title</p>
                <p class="iconContainerMore hideMoreText">More</p>
            </div>
        </a>
    </div>

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