タダスケのIT備忘録

IT系の個人的備忘録。法律事務所勤務。

jQueryでサイトの一部要素をスライドさせる

dtをクリックするとddが開閉する(slideToggle)

        $(function(){
            (注:ここにeachが抜けていた)
            var dl = $(this);
            var allDt = dl.find('dt');
            var allDd = dl.find('dd');
            var allDt = $('dl').find('dt');
            var allDd = $('dl').find('dd');
            allDd.hide(); 
            allDt.css('cursor','pointer'); 

            allDt.click(function(){
                var dd = $(this).next();
                dd.slideToggle();
            });
        });
            <dl>
                <dt>item 1</dt>
                <dd>content 1</dd>
                <dt>item 2</dt>
                <dd>content 2</dd>
                <dt>item 3</dt>
                <dd>content 3</dd>
            </dl>

            <dl>
                <dt>item 1</dt>
                <dd>content 1</dd>
                <dt>item 2</dt>
                <dd>content 2</dd>
                <dt>item 3</dt>
                <dd>content 3</dd>
            </dl>

参考にした書籍

改訂版 Webデザイナーのための jQuery入門

改訂版 Webデザイナーのための jQuery入門