【JQuery】toggleクラスにてtableの開閉を行う際の個々の動作について

Question

JQueryを使用してtable内で開閉をしたいと思っております。参考サイトにて記述させていただきましたコードで試すと開閉は動作するのですが、tabke内に開閉させるものが複数設置した場合、同じように全て開閉されてしまいます。

同じtable内にて個別に開閉させるためには、恐らくparents("table")の箇所にてnextAll、findクラスを使用し、絞り込むのだと思いますが、どのように設定・変更すれば良いかご教授いただけますと幸いです。

<table>
  <tr>
    <th><div class="open">open</div></th>
  </tr>
  <tbody class="order_images">
    <tr>
      <td>テスト１</td>
    </tr>
  </tbody>
  <tr>
    <th><div class="open">open</div></th>
  </tr>
  <tbody class="order_images">
    <tr>
      <td>テスト２</td>
    </tr>
  </tbody>
</table>

$(document).ready(function() {

    $('div.open').toggle(
        function() {
            $(this).html("Close");
            var parentTable = $(this).parents("table");
            $("tbody.order_images",parentTable).addClass("open_table");
        },

        function() {
            $(this).html("Open");
            var parentTable = $(this).parents("table");
            $("tbody.order_images",parentTable).removeClass("open_table");
        }

    )

});

tbody.order_images { display:none; }
.open_table {
    display:table-row-group!important;
    #display:block!important;
}

Answer 1

こんな感じで動くは動くと思いますが、toggleメソッドは廃止されてますので最新のjQueryだと動作しないと思います。ご存知かと思いますがご注意を。

    $('div.open').toggle(
        function() {
            $(this).html("Close");
            $(this).parents("tbody").next('.order_images').addClass("open_table");
        },

Comments

[re_nishig]

ありがとうございました。
ご指摘いただいた内容で無事解決いたしました。

toggle廃止の件もありがとうございます。
大変参考になりました。今後は使用しないよう対策させていただきます。