Why does script not work with .hide() and .show() methods?

Question

JavaScript

Good time of the day!
I can't figure out why the script using the .hide() and .show() methods doesn't work for me???
I need that when I click on the picture, the text above it changes, but this does not happen ....
It's just that when you click, all pictures have their own text display: none;
Why is that?
Thanks in advance to whoever replies!

<div class="testimonials">
    <div class="home_inner">
      <h4>Testimonials</h4>
      <div class="hide_block">
        <div class="professions_name_wrap_1">
          <p class="testimonias_text">“Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip
            at lacus commodo suscipit praesent sollicitudin enim vel mirhon”</p>
          <p class="professions_name"><span>Jon Doe</span> / CEO of LoremIpsum</p>
        </div>
        <div class="professions_name_wrap_2">
          <p class="testimonias_text">“Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip
            at lacus commodo suscipit praesent sollicitudin enim vel mirhon222”</p>
          <p class="professions_name"><span>Jon Doe</span> / Web of LoremIpsum</p>
        </div>
        <div class="professions_name_wrap_3">
          <p class="testimonias_text">“Lorem ipsum dolor sit amet, consectetur adipiscing elit mauris necip
            at lacus commodo suscipit praesent sollicitudin enim vel mirhon333”</p>
          <p class="professions_name"><span>Jon Doe</span> / Designer of LoremIpsum</p>
        </div>
      </div>
      <div class="people_foto">
        <ol>
          <li>
            <a href="#" class="people_foto_wrap_1">
              <img src="template/images/portfolio/women.png" alt="">
            </a>
          </li>
          <li>
            <a href="#" class="people_foto_wrap_2">
              <img src="template/images/portfolio/man.png" alt="">
            </a>
          </li>
          <li>
            <a href="#" class="people_foto_wrap_3">
              <img src="template/images/portfolio/women.png" alt="">
            </a>
          </li>
        </ol>
      </div>
    </div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $(".people_foto_wrap_1").click(function (e) {
      e.preventDefault();
      $(this).find('professions_name_wrap_2, professions_name_wrap_3').hide();
      $(this).find('.professions_name_wrap_1').show;
    });
    $('.people_foto_wrap_2').click(function (e) {
      e.preventDefault();
      $('.professions_name_wrap_1, .professions_name_wrap_3').hide();
      $('.professions_name_wrap_2').show;
    });
    $('.people_foto_wrap_3').click(function (e) {
      e.preventDefault();
      $('.professions_name_wrap_2, .professions_name_wrap_1').hide();
      $('.professions_name_wrap_3').show;
    });
  });
</script>

Answer 1

Something like this
https://jsfiddle.net/storm_uk/k95cwu6z/38/

Answer 2

Because the find method looks inside the "this element", let's call it that.
You need to do, for example, as follows:

$(this).parents('.testimonials')
           .find('.professions_name_wrap_2, professions_name_wrap_3')
           .hide();
/*
Берем виновника события, находим родителя, потом в нем ищем нужные нам элементы и скрываем/отображаем их.
*/

Useful jQ cheat sheet.
In general, if you write in this style, then the code is not expandable, if there are a lot of them, it will not be easy. You manually attach a handler to each photo, manually specify which blocks to show and which to hide. We need to think about how to do it in order to simplify it all.