先祖の兄弟にtoggleClassしたい

Question

前提・実現したいこと

はじめまして、最近jQueryを少しづつ勉強している者です。
以下、ご教授いただけますと幸いです。

p.open_btnを押すとdiv.wrapの兄弟のdiv.accshowにtoggleClass("opne")でアコーディオンを作りました。
が、同じ体裁をとるセクションが複数あるため一か所p.open_btnを押すと、すべてのdiv.accshowにtoggleClassされてしまいます。
理想はHTMLの体裁をあまり崩さず、なるべくjQueryの範囲で直近のdiv.accshowのみにtoggleClassをしたいです。

発生している問題・エラーメッセージ

上記記載の通り、HTMLの体裁をあまり崩さず、なるべくjQueryの範囲で直近のdiv.accshowのみにtoggleClassをしたいです。

該当のソースコード

<div class="outer">
<div class="wrap">
<div class="inner">

<h3 class="editable">ABOUT US</h3>
<div class="subtitle editable">私たちの声</div>
<div class="text editable">カタカナ語が苦手な方は「組見本」と呼ぶとよいでしょう。この組見本は自由に複製したり頒布することができます。</div>
<p class="open_btn">READ MORE</p>

</div>
</div>

<div class="accshow">
<p>
こんにちは1
</p>
</div>
</div>

↑をx3

ここに言語を入力

<script>
$(function(){
$(".open_btn").click(function(){
  $(".accshow").toggleClass("open");
});
});
</script>

試したこと

.parents()やclosest()を用いて直近のdiv.wrapやdiv.outerを取得してdiv.accshowにtoggleClassを試みましたがうまくいきませんでした；

補足情報（FW/ツールのバージョンなど）

以下CSS

.wrap {
height: 500px;
width: 100%;
position: relative;
background-image: url(http://d2zsp2z9c3lv4q.cloudfront.net/section/images/dinamic_01_1.jpg);
}

.inner {
height: auto;
max-width: 940px;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.inner p {
height: 40px;
width: 300px;
background: #fff;
color: #81d4cb;
}

.accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.3s;
}

.open {
height: auto;
width: 100%;
padding: 2rem;
background: #f1f1f1;
opacity: 1;
}

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？質問文は編集できますので、```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

.wrapまでさかのぼって兄弟をさがす

$(function(){
  $(".open_btn").on('click',function(){
    $(this).closest('.wrap').siblings('.accshow').toggleClass('open');
  });
});

Comments

[gl00my]

お礼が遅くなってしまい、申し訳ありません。
早々のご回答大変助かりました！
私自身まだまだ始めたての未熟者で、新しく便利なメソッドがある事を知りました。
ご回答ありがとうございました！
ありがとうございました！

Answer 2

「this（クリックした.open_btn）」を指定してあげてから、「その親の親の次（.accshow）」を指定しげあげたらいかがでしょうか。

$(function(){
$(".open_btn").click(function(){
$(this).parent().parent().next().toggleClass("open");
});
});

Comments

[gl00my]

お礼が遅くなってしまい、申し訳ありません。
早々のご回答大変助かりました！
私でも理解できるメソッドで比較的簡単に扱えそうです。
ありがとうございました！