Hello there, I'm struggling to grasp how to make this particular functionality work.
Basically, I have 8 divs, each containing an image used as a button with the same class (tm-img), and hidden divs with additional information. My goal is to initially display only the images and when a user clicks on one of them, only the hidden div associated with that specific image should be shown. Unfortunately, at the moment, clicking on any image reveals all hidden divs instead of just the one clicked on.
<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>
The remaining 7 divs are identical, featuring different images but the same name (Rick).
Thank you for your help!