CODEWITHSUNDEEP
jquery
Patrick
Patrick

Reputation: 820

Applying "this" to a specific parents other child using Jquery?

I have this basic layout. Where if you click "learn more" it should reveal more description text in the box by adding a class that changes its display property.

However usually i will use "closest" or "this" snippets if its a direct child of the clickable element but im having trouble finding this one in the dom.

How can i make each "learn more" button open up the correct text below it without opening the others/all at once?

I can not change the html markup.

Thanks!

$(function() {
    $('.learn-more-btn').click(function() {
        $('.item-learn-more-popup').toggleClass("active");
    });
});
.item-learn-more-popup {
    display:none;
}
.item-learn-more-popup.active{
  display:block;
}







.items-and-stuffs {
  display:flex;
  flex-wrap:wrap;
}
.item {
  padding:40px;
  margin:10px;
  width: calc(33.33% - 100px);
  background:#e4e4e4;
}
h2{
  margin-top:0;
  margin-block-start: 0;
}

a.learn-more-btn {
    border: 1px solid gray;
    background: gray;
    color: white;
    padding: 10px 13px;
    display: block;
    text-align: center;
    max-width: 88px;
    pointer:cursor;
    border-radius:90px;
    cursor:pointer;
}
.item-learn-more-popup {
    margin-top: 17px;
}
@media only screen and (max-width: 950px) {
  .item {
    padding:40px;
    width: calc(50% - 100px);
  }
}

@media only screen and (max-width: 580px) {
  .item {
    padding:40px;
    width: calc(100% - 100px);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-and-stuffs">
<div class="item">
   <div class="item-content">
     <div><h2>Item 1</h2></div> 
     <div><p>This is item one... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item one... This is more info about item one. Where we      go into more details about this item
   </div> 
</div> 
<div class="item">
   <div class="item-content">
     <div><h2>Item 2</h2></div> 
     <div><p>This is item two... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item two... This is more info about item two. Where we      go into more details about this item
   </div>
</div> 
<div class="item">
   <div class="item-content">
     <div><h2>Item 3</h2></div> 
     <div><p>This is item three... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item three... This is more info about item three. Where      we go into more details about this item
   </div> 
 </div> 
 <div class="item">
   <div class="item-content">
     <div><h2>Item 4</h2></div> 
     <div><p>This is item four... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item four... This is more info about item four. Where        we go into more details about this item
   </div> 
 </div> 
 <div class="item">
   <div class="item-content">
     <div><h2>Item 5</h2></div> 
     <div><p>This is item five... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item five... This is more info about item five. Where        we go into more details about this item
   </div> 
 </div>
                
</div>

Upvotes: 0

Views: 23

Answers (2)

User863
User863

Reputation: 20039

Try using find() with closest()

closest()

  1. Begins with the current element
  2. Travels up the DOM tree until it finds a match for the supplied selector
  3. The returned jQuery object contains zero or one element for each element in the original set, in document order

$('.learn-more-btn').click(function() {
  $(this).closest('.item').find('.item-learn-more-popup').toggleClass("active");
});
.item-learn-more-popup {
  display: none;
}

.item-learn-more-popup.active {
  display: block;
}

.items-and-stuffs {
  display: flex;
  flex-wrap: wrap;
}

.item {
  padding: 40px;
  margin: 10px;
  width: calc(33.33% - 100px);
  background: #e4e4e4;
}

h2 {
  margin-top: 0;
  margin-block-start: 0;
}

a.learn-more-btn {
  border: 1px solid gray;
  background: gray;
  color: white;
  padding: 10px 13px;
  display: block;
  text-align: center;
  max-width: 88px;
  pointer: cursor;
  border-radius: 90px;
  cursor: pointer;
}

.item-learn-more-popup {
  margin-top: 17px;
}

@media only screen and (max-width: 950px) {
  .item {
    padding: 40px;
    width: calc(50% - 100px);
  }
}

@media only screen and (max-width: 580px) {
  .item {
    padding: 40px;
    width: calc(100% - 100px);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-and-stuffs">
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 1</h2>
      </div>
      <div>
        <p>This is item one... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item one... This is more info about item one. Where we go into more details about this item
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 2</h2>
      </div>
      <div>
        <p>This is item two... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item two... This is more info about item two. Where we go into more details about this item
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 3</h2>
      </div>
      <div>
        <p>This is item three... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item three... This is more info about item three. Where we go into more details about this item
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 4</h2>
      </div>
      <div>
        <p>This is item four... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item four... This is more info about item four. Where we go into more details about this item
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <div>
        <h2>Item 5</h2>
      </div>
      <div>
        <p>This is item five... This is mo...</p>
      </div>
      <div><a class="learn-more-btn">learn more</a></div>
    </div>
    <div class="item-learn-more-popup">
      This is item five... This is more info about item five. Where we go into more details about this item
    </div>
  </div>

</div>

Upvotes: 1

ssc-hrep3
ssc-hrep3

Reputation: 16079

The problem here is, that you are selecting all instances of .item-learn-more-popup. If you only want to select the nearest instance of the popup, you need to go up the DOM and then back down. You could do this with the parents() (applied to the clicked element) selector and go up to a common parent. From there you need to go down the tree and find the popup.

$('.learn-more-btn').click(function() {
    $(this).parents('.item').find('.item-learn-more-popup').toggleClass('active');
});

And here is your adapted example:

$(function() {
    $('.learn-more-btn').click(function() {
        $(this).parents('.item').find('.item-learn-more-popup').toggleClass('active');
    });
});
.item-learn-more-popup {
    display:none;
}
.item-learn-more-popup.active{
  display:block;
}

.items-and-stuffs {
  display:flex;
  flex-wrap:wrap;
}
.item {
  padding:40px;
  margin:10px;
  width: calc(33.33% - 100px);
  background:#e4e4e4;
}
h2{
  margin-top:0;
  margin-block-start: 0;
}

a.learn-more-btn {
    border: 1px solid gray;
    background: gray;
    color: white;
    padding: 10px 13px;
    display: block;
    text-align: center;
    max-width: 88px;
    pointer:cursor;
    border-radius:90px;
    cursor:pointer;
}
.item-learn-more-popup {
    margin-top: 17px;
}
@media only screen and (max-width: 950px) {
  .item {
    padding:40px;
    width: calc(50% - 100px);
  }
}

@media only screen and (max-width: 580px) {
  .item {
    padding:40px;
    width: calc(100% - 100px);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-and-stuffs">
<div class="item">
   <div class="item-content">
     <div><h2>Item 1</h2></div> 
     <div><p>This is item one... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item one... This is more info about item one. Where we      go into more details about this item
   </div> 
</div> 
<div class="item">
   <div class="item-content">
     <div><h2>Item 2</h2></div> 
     <div><p>This is item two... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item two... This is more info about item two. Where we      go into more details about this item
   </div>
</div> 
<div class="item">
   <div class="item-content">
     <div><h2>Item 3</h2></div> 
     <div><p>This is item three... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item three... This is more info about item three. Where      we go into more details about this item
   </div> 
 </div> 
 <div class="item">
   <div class="item-content">
     <div><h2>Item 4</h2></div> 
     <div><p>This is item four... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item four... This is more info about item four. Where        we go into more details about this item
   </div> 
 </div> 
 <div class="item">
   <div class="item-content">
     <div><h2>Item 5</h2></div> 
     <div><p>This is item five... This is mo...</p></div>
     <div><a class="learn-more-btn">learn more</a></div> 
   </div> 
   <div class="item-learn-more-popup">
     This is item five... This is more info about item five. Where        we go into more details about this item
   </div> 
 </div>
                
</div>

Upvotes: 1

Related Questions