アコーディオンメニューの共通化

Question

jqueryのslideToggleを使って、いくつかのアコーディオンメニューを作りたいのですが
bottun1〜button2,3とひとつずつ作っていくのは、面倒なのでbuttonの直下にあるリストを対象にして
共通化するようなことは出来ないのかなと思ったので質問させていただきました。

ひとつずつ書いていくしか方法はないのでしょうか？

$('li').hide();
$('#button1').on('click', function () {
 $('li').slideToggle(300);
});

<div class="wrapper-common-content">
  <h2 class="wrapper-common-content-h2" id='button1'>メニュー１</h2>
  <ul>
    <li>
      <p class="wrapper-common-content-text">
        ああああああああああああああああああああ</p>
    </li>
  </ul>

  <h2 class="wrapper-common-content-h2" id='button1'>メニュー２</h2>
  <ul>
    <li>
      <p class="wrapper-common-content-text">
        いいいいいいいいいいいいいいいいいいいい</p>
    </li>
  </ul>

  <h2 class="wrapper-common-content-h2" id='button1'>メニュー３</h2>
  <ul>
    <li>
      <p class="wrapper-common-content-text">
        うううううううううううううううううううう</p>
    </li>
  </ul>
</div>

Comments

[m.ts10806]

button1が３つありますが、コードコピペされてますか？

[Qoo]

はい、コピペしました。idはそれぞれ別で設定します。

[m.ts10806]

でも今、同じになってるのでJavaScriptは正しく動きません。
「別で設定」とはどういう仕組みでやろうとしているのでしょうか。
前提や背景も記載してください。

[Qoo]

どういう仕組みでやればいいのかを質問しています。
質問に記載しているとおり、メニュー１、メニュー２、メニュー３のそれぞれの処理を共通化して
簡素化して書く方法を模索しています。できないならひとつずつ書きますので問題はないです。

[m.ts10806]

同じidを出力している状態が前提で、それを変えられないのであれば言うことはありません。前提背景不明なままでは「どのような仕組みでやればいいか」を他人が判断できるわけがないので。
求める情報を書かないまま「聞いたことだけに答えろ」というのはただの横暴です。

Answer 1

多分こんな感じですが

  $('.wrapper-common-content-h2').on('click',function(){
    $(this).next('ul').slideToggle(300);
  });

Comments

[Qoo]

ありがとうございます！
まさにやりたかったことです！

[yambejp]

block要素ではないものをslide処理するとがたがたするので
整形するときに工夫が必要だと思います

[Qoo]

なるほど。ありがとうございます！