javascript - クリックでリスト項目を切り替える

Question

dt をクリックすると、対応する dd が表示され、その dt を再クリックすると dd が上にスライドするリストを作成しようとしています。

ユーザーがクリックしない限り、最初の dd は常に残ります。

問題は、ユーザーが dt をクリックすると、すべての dd が表示されることです。

フィドルのデモはこちら

Answer 1

以下のよう.nextUntilにクリックして使用してみてください。dt

(function () {
    var dd = $('dd');
    dd.filter(':lt(3)').addClass('show'); //add show to first 3
    dd.filter(':nth-child(n+6)').addClass('hide'); //add hide to rest

    $('dt').on('click', function () {
        $(this).nextUntil('dt').toggleClass('show hide');
    })

})();

デモ: http://fiddle.jshell.net/2MrxM/