jQuery 隣接要素の子要素を取得したい

Question

前提・実現したいこと

ul/liではなくtableでアコーディオンを実装したく、下記のように記述しました。

                <tr class="ac-parent-p">
                    <th>メニュータイトル</th>
                    <td>内容</td>
                </tr>
                <tr class="ac-child-p">
                    <td colspan="2">
                        <img>
                    </td>
                </tr>

.ac-child-p{
  display: none;
}

$(function () {
    $('.ac-parent-p').on('click', function () {
        $(this).next().slideToggle();
    });
});

ですが、この場合だと.ac-child-pが開く際、スルッと開くのではなくパッと開いてしまうため（おそらくdisplay:table-row;が原因です）
下記のように、divが開くようにしたく書き直しました。

                <tr class="ac-parent-p">
                    <th>メニュータイトル</th>
                    <td>内容</td>
                </tr>
                <tr class="ac-child-p">
                    <td colspan="2">
                        <div><img></div>
                    </td>
                </tr>

.ac-child-p{
  div{
   display: none;
  }
}

$(function () {
    $('.ac-parent-p').on('click', function () {
        $(this).next().children('div').slideToggle();
    });
});

next().children('div') が間違えているのだと思いますが、こちらだとdivが開きませんでした。
どなたか正しい隣接要素の子要素を取得する方法を教えていただけないでしょうか。
ご回答よろしくお願いいたします。

Answer 1

childrenは子要素しか見ないため、孫まで見たい場合はfindを使用してはいかがでしょうか。

Comments

[omen0]

children()では子要素までしか見られないのですね。findを試したら無事動きました。
ありがとうございました！