Блог

 <div class="wrapper">
<div class="to-click">
<h1>click me</h1>
</div>
<div class="to-show">
<p>this text will appear when clicked</p>
</div>
</div>
<div class="wrapper">
<div class="to-click">
<h1>click me</h1>
</div>
<div class="to-show">
<p>this text will appear when clicked</p>
</div>
</div>
  

у меня неизвестное количество divs, в каждом div есть элемент, на который нужно щелкнуть, и элемент, который нужно переключить

 $('.to-show').hide();
$('.to-click').click(function () {
$('.to-show').toggle();
});
  

я хочу, чтобы при нажатии на первый H1 отображался только первый p, а при нажатии на второй h1 отображался второй p и так далее

Другие ответы хороши, но я бы рекомендовал немного другой подход, используя .closest() и .find() .

Эта версия будет работать, даже если вы добавите что-то среднее .to-click и .to-show , если они отменены или даже если они не являются родственными. Таким образом, это не сильно зависит от вашей структуры HTML, если у них есть общий предок.

ДЕМОНСТРАЦИЯ:

 $('.to-show').hide();
$('.to-click').on('click', function () {
  $(this).closest('.wrapper').find('.to-show').toggle();
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="to-click">
    <h1>click me</h1>
  </div>
  <div class="to-show">
    <p>this text will appear when clicked</p>
  </div>
</div>
<div class="wrapper">
  <div class="to-click">
    <h1>click me</h1>
  </div>
  <div class="to-show">
    <p>this text will appear when clicked</p>
  </div>
</div>  

Вы можете использовать селектор next () в jQuery, чтобы определить класс next to-show и переключить его:

 $('.to-show').hide();
$('.to-click').click(function() {
  $(this).next(".to-show").toggle();
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="to-click">
    <h1>click me</h1>
  </div>
  <div class="to-show">
    <p>this text will appear when clicked</p>
  </div>
</div>
<div class="wrapper">
  <div class="to-click">
    <h1>click me</h1>
  </div>
  <div class="to-show">
    <p>this text will appear when clicked</p>
  </div>
</div>  

Если вы не можете отредактировать divs, чтобы присвоить им идентификаторы, вы можете использовать элемент, на который вы нажали, чтобы найти следующий элемент для переключения. Что-то вроде этого:

 $('to-click').click(function() {
    // close any existing shown items
    // comment this out if you want multiple items at the same time.
    $('.to-show').hide();  

    var $self = $(this); // this will be the element clicked
    // find the parent then select the '.to-show'
    var $to_show = $self.parent().find('.to-show')
    $to_show.toggle();
}