Jquery Show just one Item by the same class after click-event-CodePudding

i am new in scripting Jquery/Javascript and actually i've some struggle. How can i show one item by the same class without affect the other items?

My code:

$(function() {
  $('.embedContainer > .myPosterImage').on('click', function() {
    $('.embedContainer > .myPosterImage').hide();
    $('.embedContainer > embed').show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <img  src="img/websites/01_documentation.jpg" data-original="img/websites/full/01_full.jpg" />
  <embed src="img/websites/Concept.pdf" width="563.41" height="375.98"></embed>
</div>

<div >
  <img  src="img/websites/01_documentation.jpg" data-original="img/websites/full/01_full.jpg" />
  <embed src="img/websites/Concept.pdf" width="563.41" height="375.98"></embed>

</div>

Thanks a lot.

CodePudding user response：

The first line will hide all of them, which may be what you want to do (if you want to collapse all and expand the clicked one, for example):

$('.embedContainer > .myPosterImage').hide();

But as you've found, this second line will also show all of them:

$('.embedContainer > embed').show();

What you can do is traverse the DOM starting from the element which was clicked (this within the click event handler). In this case you'd traverse up the DOM (using closest() for example) to a common parent element and then back down (using find() for example) to the target element.

Something like this:

$(this).closest('.embedContainer').find('embed').show();