показ div внутри родительского элемента путем обхода братьев и сестер

Question

На моем сайте WordPress.У меня есть две ссылки «Узнать больше» на моей домашней странице.Когда кто-то нажимает, я бы хотел, чтобы они оскорбили соответствующий параграф выше и изменили «Узнать больше» на «Закрыть».В настоящее время нажатие любой кнопки показывает оба.

.hide-mobile {
    display: none;
}

jQuery(document).ready(function($) {
    $(".learnMore").on("click", function(e) {
        var $a = $(this).toggleClass("is-active")
        $a.text(function(i, t) {
            return t === 'Learn More' ? 'Close' : 'Learn More';
        });
        $( "p" ).siblings( ".reveal" ).slideToggle(500);
    });
});

<div class="box-one box">
<h2>Header One</h2>
<p class="hide-mobile reveal">Etiam ut vehicula velit. Cras ut ipsum id tortor ultrices iaculis. Donec sodales ultricies urna vitae porta.</p>
<a class="button" href="/link-url/">Button One</a>
<a class="learnMore mobile">Learn More</a>
</div>

<div class="box-two box">
<h2>Header Two</h2>
<p class="hide-mobile reveal">Morbi et varius elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<a class="button" href="/link-url-two/">Button Two</a>
<a class="learnMore mobile">Learn More</a>
</div>

Answer 1

Зачем начинать поиск с элементов <p>?

$( "p" ).siblings( ".reveal" ).slideToggle(500);

Когда элемент .reveal также является p, на который вы хотите нацелиться?
this - это то, что вам нужно!

jQuery(document).ready(function($) {
  $(".learnMore").on("click", function(e) {
    var $a = $(this).toggleClass("is-active")
    $a.text(function(i, t) {
      return t === 'Learn More' ? 'Close' : 'Learn More';
    });
    $( this ).siblings( ".reveal" ).slideToggle(500);
  });
});

.hide-mobile {
  display: none;
}

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

<div class="box-one box">
  <h2>Header One</h2>
  <p class="hide-mobile reveal">Etiam ut vehicula velit. Cras ut ipsum id tortor ultrices iaculis. Donec sodales ultricies urna vitae porta.</p>
  <a class="button" href="/link-url/">Button One</a>
  <a class="learnMore mobile">Learn More</a>
</div>

<div class="box-two box">
  <h2>Header Two</h2>
  <p class="hide-mobile reveal">Morbi et varius elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
  <a class="button" href="/link-url-two/">Button Two</a>
  <a class="learnMore mobile">Learn More</a>
</div>