Как скрыть блок комментариев к определенному ответу с jQuery и toggle?

Question

[Verygoodman]

Всем привет.
Подскажите, пожалуйста, как при помощи jQuery и метода toggle можно при клике на ссылку скрыть или показать комментарии к определенному ответу. Так как на qna.habr.com.

Пример разметки:

<div id="answer_01">
Какой-то ответ 1...
<a id="answer_01" href="#">3 комментария</a>
</div>
<div id="comment_answer_01">
	<div id="comment_1">Комментарий 1</div>
	<div id="comment_2">Комментарий 2</div>
	<div id="comment_3">Комментарий 3</div>
</div>
<div id="answer_02">
Какой-то ответ 2...
<a id="answer_02" href="#">4 комментария</a>
</div>
<div id="comment_answer_02">
	<div id="comment_4">Комментарий 1</div>
	<div id="comment_5">Комментарий 2</div>
	<div id="comment_6">Комментарий 3</div>
	<div id="comment_7">Комментарий 4</div>
</div>
Таких блоков может быть много...

Например, необходимо, при клике на ссылку <a id="answer_01" href="#">3 комментария</a> скрыть блок с комментариями к ответу <div id="comment_answer_01">.

Я знаю как получать элементы по классам, тегам и id при помощи селекторов. Но я не нашел как получить, например, ссылку по конкретному id, и при этом, сделать так, чтобы в метод toggle передавать элемент с конкретным id.

Как можно решить такую задачу?

Comments

[Rsa97]

<div id="answer_01">
<a id="answer_01" href="#">

Не надо так делать. На странице не должно быть элементов с одинаковыми id.

[Verygoodman]

Rsa97, Да, само собой. Я этот пример верстки набросал для наглядности. Мне нужно было понять, как получить id элемента. Благодаря помощи 0xD34F я все наглядно понял. Я забыл о event и не знал о свойстве target.

Answer 1

[0xD34F]

const answerSelector = `div[id^="answer"]`;
const commentsLinkSelector = `${answerSelector} > a`;
const getCommentsSelector = answerId => `#comment_${answerId}`;

Вот jquery и toggle:

$(document).on('click', commentsLinkSelector, function(e) {
  e.preventDefault();
  $(getCommentsSelector($(this).closest(answerSelector).attr('id'))).toggle();
});

А вот нет ни того, ни другого:

document.addEventListener('click', e => {
  const answer = e.target.closest(commentsLinkSelector)?.closest(answerSelector);
  if (answer) {
    e.preventDefault();
    document.querySelector(getCommentsSelector(answer.id)).hidden ^= 1;
  }
});

Comments

[Verygoodman]

0xD34F, спасибо большое! Похоже, это то, что нужно.