jQuery slideToggle

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をスライドします。

コメント

タイトルとURLをコピーしました