Cannot hide element when parent element is currently active with jQuery

user_12054257 0
Viewed 138

I have created a mini tab filter filter. The issue that i'm having is that when ever i'm on the current tab the "more" disappears on all the tabs. I don't want it to display when the page first loads because i want to show the content of the first tab. Also for some reason the class "current" isn't applied when the page first loads. Thanks!

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

jquery javascript
2 Answers

Try this using the closest() to get the elements on click.

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

user_32896600

Adding this to your jQuery selection will hide only the more in context of the tab clicked 

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

Note: Before you have to mark all more visible and then execute this

Snippet attached for reference

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

user_42837380
Related