Q: jQuery как отобразить нужный элемент В примере ниже по клику на вопрос скрывается элемент в вопросом, по которому кликнул пользователь. Как добиться того, чтобы скрывался соответствующий элемент с ответом?


$(document).ready(function() {
  $('.otvet').hide();

  $('.vopros').click(function() {

    $(this).toggle('slide');
  });
});
* {
  margin: 0px;
  padding: 0px;
}
#vopros {
  width: 800px;
  margin: 0 auto;
  padding: 15px;
  background: rgb(233, 233, 233);
}
.vopros {
  cursor: pointer;
  text-decoration: underline;
  width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="vopros">
  <p class="vopros">Первый блок</p>
  <p class="otvet">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum itaque illo, dolore impedit consectetur aut, ut autem maiores ad repellat! Qui iste praesentium expedita, ipsa, quasi facilis culpa vitae.</p>
  <br>
  <p class="vopros">Второй блок</p>
  <p class="otvet">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum itaque illo, dolore impedit consectetur aut, ut autem maiores ad repellat! Qui iste praesentium expedita, ipsa, quasi facilis culpa vitae.</p>
</div>



A: Вы совершенно правильно скрываете элементы по клику и используете this.  Не вижу проблемы или вопроса, но, возможно вы имеете в виду что хотите не скрывать вопросы по клику а открывать и скрывать ответы по клику на вопрос? 
в текущем коде обработка клика повешана на вопросы и this в указывает именно на них, поэтому они и скрываются, если надо влиять на другие элементы, то нужно использовать селекторы для них, например если ответы следуют сразу за вопросами то можно использовать $(this).next().toggle('slide');

A: Я бы посоветовал вам изменить разметку для начала. Обернуть каждую пару вопрос-ответ в свой контейнер. А так же, изначально спрятать все ответы средствами CSS, а не JS. 


$(function() {

  // по клику на див-вопрос
  $('.vopros').click(function() {

    // ищем на этом же уровне вложенности элемент по классу
    $(this).siblings('.otvet')
      // и скрываем или отображаем его
    .toggle('slide');

  })

});
* {
  margin: 0px;
  padding: 0px;
}
.voprosy {
  width: 800px;
  margin: 0 auto;
  padding: 15px;
  background: rgb(233, 233, 233);
}
.vopros {
  cursor: pointer;
  text-decoration: underline;
  width: 30%;
}
.otvet {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="voprosy">
  <div class="block-vopros">
    <p class="vopros">Первый блок</p>
    <p class="otvet">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum itaque illo, dolore impedit consectetur aut, ut autem maiores ad repellat! Qui iste praesentium expedita, ipsa, quasi facilis culpa vitae.</p>
  </div>
  <div class="block-vopros">
    <p class="vopros">Второй блок</p>
    <p class="otvet">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum itaque illo, dolore impedit consectetur aut, ut autem maiores ad repellat! Qui iste praesentium expedita, ipsa, quasi facilis culpa vitae.</p>
  </div>
</div>


