jquery アコーディオン 複数ボタンのクリック動作について

Question

【解決したいこと】

「ボタン1」「ボタン2」のいずれかがクリックされた際、「回答」の部分が表示されるアコーディオンを
作成したのですが、「ボタン2」の方をクリックにした時にしか表示されません。また、
「ボタン2」がクリックされた際に、「ボタン2」のテキストのみ「閉じる」に変更したいのですが、こちらも変更ができず、色々試したのですが解決できなかったため、教えていただければありがたいです。

該当のソースコードは下記です。

<div class="wrap">
  <div class="question action">
    ボタン1
  </div>
  <div class="btn2 action">
    ボタン2
  </div>
  <div class="answer">
    回答回答
  </div>
</div>

$(function () {
  	$(".action").on("click",function(e){
        var $answer = $(this).parent('.wrap');
        var $answer2 = $(this).next('.answer');
			e.preventDefault();
			if ($answer2.css("display") == "none" ){
				$answer2.stop().slideDown();
        $(this).find('.btn2').text('閉じる');
				$answer.addClass("open");
			} else {
				$answer2.stop().slideUp();
				$answer.removeClass("open");
			}
		});
});

.answer {
    display: none;

}

Answer 1

「ボタン2」の方をクリックにした時にしか表示されません。

$(this).next('.answer');と指定しているので、ボタンの次の要素が.answerのとき以外は動かないでしょう。
.wrapの中に.answerが一つなのであれば、$answer.find('.answer');にすればよいでしょう。

---

「ボタン2」のテキストのみ「閉じる」に変更したい

$(this)はクリックされた要素（クリックされた.action） が入っているので、
$(this).find('.btn2').text('閉じる');は$answer.find('.btn2').text('閉じる');にする必要があります。
（ちなみにクリックした要素の文字を変えたければ、$(this).text('閉じる');です）

Comments

[kurio]

kei344さま
回答をくださりありがとうございます。動かなかった理由がよくわかりました。
表示できました!本当にありがとうございました。