jqueryのslideToggleについて

Question

お世話になっております。
jqueryについてお知恵を拝借したく投稿いたしました。

ページ内に以下のsectionが10個程あります。
タブ切替で一個が見えているときは他の内容は見えないようになっているのですが、
以下のscriptがsectionの一個目にしか適用されず困っています。

初心者で至らない点が多いかと思いますが、よろしくお願いいたします。

<section>
  <div>
    <div id="btn1">
    </div>

    <div>
      <div>
        <div id="content1">
          コンテンツ1
        </div>

        <div>
          <div>
            <p id="btn2">ボタン2</p>
            <div id="content2">
              コンテンツ2
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</section>

<script>
  $('#btn1').click(function () {
    $('#content1').stop().slideToggle(150);
  });
  $('#btn2').click(function () {
    $('#content2').stop().slideToggle(150);
  });
</script>

---

Comments

[yambejp]

> sectionが10個程

sectionの中にボタンとcontentsの組み合わせが10個あるのではないのですか？

[mk2tnk]

10個それぞれのsectionの中にボタンのコンテンツの組み合わせがある状態です。

[yambejp]

そうなるとm.ts10806さんの回答に繋がりますね

Answer 1

idは同一ページ内で重複はNGです。
別のidを振ってそれぞれイベントを当てるか、classを振ってthisを用いてcontentを操作しましょう。

Comments

[mk2tnk]

助かりました、ありがとうございます。

[m.ts10806]

結局どのように解決とされたのでしょう。
https://teratail.com/help/question-tips#questionTips4-2