Q&Aでよく見かけるアコーディオンのdlを、ページ内リンクでも開くように変更しました。
$(function(){ $('dd').css('display','none'); $('dt').css('cursor','pointer').click(function(){ $(this).next().slideToggle(500,'easeOutExpo'); }); $('#check').click(function(){ $('html,body').animate({ scrollTop: $('#receipt').offset().top}, { duration: 500, easing: "easeOutExpo", complete: function(){$('#receipt').next().slideDown(500,'easeOutExpo');} }); }); });
- 5行目まで
ddを始め非表示にし、dtをクリック時にスライド表示させます。
jQuery.easing.jsを読み込んでいない場合には’easeOutExpo’を’swing’などに変更します。 - 6行目から
#checkのidを持つ要素をクリックすると、#receipt属性を持つdtへスムーススクロールし、その後ddをスライドします。
コメント