Same class but only trigger function for the one selected-CodePudding

Hello everyone I'm having a hard time trying to understand how to make this work.

I have 8 different divs, each one with an img used as button and same class (tm-img) and hidden divs with additional info. What I want is to have displayed only the img at the beginnig and when the user clicks one of the 8 images depending on the one they clicked the hidden divs from that image show. (Whats happening now is tha if I click on one image all hidden divs from all images show not just the one I clicked)

<div class="tm-full-container">
                <div class="team-member card-container blue-card">
                    <img class='tm-img' onclick='run()' src="/team_1.png" alt="">
                    <h5 class="tm-title">Chef</h6>
                
                <div class="tm-info">
                    <p class="tm-name">Rick Jones</p>
                    <p class="tm-position">Chef</p>
                </div>

                </div>

                <div class="tm-full-info">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at 
                        ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia 
                        tempora temporibus perspiciatis? Assumenda?</p>
                </div>
            </div>

<script>
     function run(){
      
      $('.tm-info').toggle();
      $('.tm-full-info').toggle();
      $('.tm-title').toggle();
    
     }</script>

All other 7 divs look the same with different image and name (Rick).

Thanks in advance.

Example

CodePudding user response：

This could be done using the keyword this: https://www.yogihosting.com/jquery-this/

.tm-info, .tm-full-info, .tm-title {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
  <div class="team-member card-container blue-card">
      <img class='tm-img' src="https://via.placeholder.com/150" alt="">
      <h5 class="tm-title">Chef</h6>

  <div class="tm-info">
      <p class="tm-name">Rick Jones</p>
      <p class="tm-position">Chef</p>
  </div>

  </div>

  <div class="tm-full-info">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at 
          ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia 
          tempora temporibus perspiciatis? Assumenda?</p>
  </div>
 </div>
 
<div class="tm-full-container">
  <div class="team-member card-container blue-card">
      <img class='tm-img' src="https://via.placeholder.com/150" alt="">
      <h5 class="tm-title">Chef</h6>

  <div class="tm-info">
      <p class="tm-name">Rick Jones</p>
      <p class="tm-position">Chef</p>
  </div>

  </div>

  <div class="tm-full-info">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at 
          ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia 
          tempora temporibus perspiciatis? Assumenda?</p>
  </div>
</div>

<script>
   $('.tm-img').click(function(){
    $(this).parent().parent().find('.tm-info').toggle();
    $(this).parent().parent().closest('.tm-full-info').toggle();
    $(this).parent().parent().closest('.tm-title').toggle();
  });
</script>

CodePudding user response：

Consider the following.

$(function() {
  function revealFullInfo(event) {
    var self = $(event.target);
    var parent = self.closest(".tm-full-container");
    $('.tm-info, .tm-full-info, .tm-title', parent).toggle();
  }

  $(".tm-img").click(revealFullInfo);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
  <div class="team-member card-container blue-card">
    <img class='tm-img' src="https://dummyimage.com/100x150/000/fff.png" alt="">
    <h5 class="tm-title">Chef</h6>
      <div class="tm-info">
        <p class="tm-name">Rick Jones</p>
        <p class="tm-position">Chef</p>
      </div>
  </div>
  <div class="tm-full-info">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</p>
  </div>
</div>

It's all a matter of using the correct selector and scope.

$('.tm-info, .tm-full-info, .tm-title', parent).toggle();

This is the same as:

parent.find('.tm-info, .tm-full-info, .tm-title').toggle();

CodePudding user response：

You can do something like in below snippet . Use the this keyword so that the clicked element is triggered not all .

You can also for loop to run through all tags and trigger(toggle) clicked event

function funcRun(show) {
  var showInfo = show.querySelector(".tm-tag-Info");
  showInfo.classList.toggle("tm-tag-Info-Show")
}

.tm-tag-Info {
  display: none
}

.tm-tag-Info-Show {
  display: block
}

.tm-tag {
  border: 2px solid red;
  margin: 10px;
  padding: 10px;
}

.imageFun {
  width: 100px;
  height: 100px
}

<div class="tm-tag" onclick="funcRun(this)">
  <h4 class="tm-tag-Hed">CV for BV</h4>
  <span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>

<div class="tm-tag" onclick="funcRun(this)">
  <h4 class="tm-tag-Hed">CV for BV</h4>
  <span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>

<div class="tm-tag" onclick="funcRun(this)">
  <h4 class="tm-tag-Hed">CV for BV</h4>
  <span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>