jQueryで先祖要素の中にある任意のクラスを持つ要素を指定したい。

Question

###前提・実現したいこと
jQueryで下記のようなHTMLでボタンを押すと回答が見れるようにしたいのですが、
どのように記述したらよいでしょうか？

<div class="parents">
 <div class="question">
   質問
   <p class="btn">回答を見る</p>
 </div>
 <div class="answer">
   回答
 </div>
</div>

<div class="parents">
 <div class="question">
   質問
   <p class="btn">回答を見る</p>
 </div>
 <div class="answer">
   回答
 </div>
</div>

###発生している問題・エラーメッセージ
回答を見るを押すと全ての回答が開いてしまいます。
それぞれの要素に独自のIDやclassを追加せずに実現したくて
.parents()などを使ってどうにか、p.btnから見た先祖要素div.parentsの中にある
div.answerを指定しようとしていますが、うまくいきません。

###ソースコード

$(function(){
    $(".answer").hide();
    $(".btn").click(function(){
	$(this).toggleClass("open");
	$(".answer").slideToggle();
    });
});

Answer 1

closestメソッドが使えます。

$(function() {
    $(".btn").click(function() {
        $(this).closest(".parents").find(".answer").slideToggle();
    });
});

Comments

[LINDA48]

closestとparentの違いについてとても勉強になりました。
http://satohmsys.info/post-1600/

ありがとうございました！

Answer 2

こんな感じでどうでしょうか？
もっといい書き方あったら教えてください :D

$(this).parent().next(".answer").slideToggle();

参考: Traversing - jQuery 日本語リファレンス

Comments

[LINDA48]

迅速にご回答いただけた、ryunix様をベストアンサーに選ばせていただきました。
ありがとうございました！

Answer 3

追記です。

<p>タグが閉じられていないので、</p>として動かしてみてください。

Comments

[LINDA48]

ご指摘ありがとうございます。修正しました！

Answer 4

これで動くかと思います。

$(function(){
$('.answer').hide();
$('.question').each(function() {
$(this).find('.btn').click(function() {
$(this).toggleClass('open');
$(this).parent().next().slideToggle();
});
});
});

Comments

[LINDA48]

ありがとうございます。
今回each()を使わなくても動きました！

Answer 5

質問の趣旨に合ってないけど、一応参考にこんなのもある。

http://www.tagindex.com/html5/interactive/details.html

Comments

[LINDA48]

details便利ですね！簡単に実装したいときに使えそうです。