Функция переключения jQuery не работает должным образом с каждым и щелкает функцией

Question

Я пытаюсь скрыть элемент +Details после его нажатия и показать xClose, и наоборот, но он не работает. Также, когда я нажимаю +Details, все div-ы открываются, хотя я использовал функцию each(). Когда вы нажимаете xClose, я хочу, чтобы текст eventInfo отображался, но я даже не могу отобразить текст xClose.

$('.openInfo').each(function (index) {
  $(this).click(function () {
    $('.eventInfo').toggleClass('show');
    $('openInfo').toggleClass('hide');
    $('closeInfo').toggleClass('show');
  });
});


$('.closeInfo').each(function (index) {
  $(this).click(function () {
    $('.eventInfo').toggleClass('show');
    $('closeInfo').toggleClass('hide');
    $('openInfo').toggleClass('show')
  });
});

  .event{
    margin-bottom: 30px;
  }

  .eventInfo, .closeInfo{
    display: none;
  }

  .show{
    display: block;
  }

  .hide{
    display: none;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event">
            <p class="openInfo"><span>+</span>Details</p>
            <p class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            <p class="closeInfo"><span>x</span>Close</p> 
    </div>
    <div class="event">
            <p class="openInfo"><span>+</span>Details</p>
            <p  class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            <p class="closeInfo"><span>x</span>Close</p>
    </div>

Answer 1

Необходимо прикрепить прослушиватели кликов к .closeInfo и .openInfo, а затем внутри события необходимо toggle () классы в его родительском .event.

$('.closeInfo, .openInfo').on('click', function() {
  let $closestEvent = $(this).closest('.event');
  $closestEvent.find('.eventInfo, .closeInfo, .openInfo' ).toggle();
});

.event {
  margin-bottom: 30px;
}

.eventInfo,
.closeInfo {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="event">
  <p class="openInfo"><span>+</span>Details</p>
  <p class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  <p class="closeInfo"><span>x</span>Close</p>
</div>

<div class="event">
  <p class="openInfo"><span>+</span>Details</p>
  <p class="eventInfo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  <p class="closeInfo"><span>x</span>Close</p>
</div>