jQueryでの開閉式のアコーディンの動きいろいろのデモページ

開閉式のアコーディンの動き 1

CSS

• ビギナー向け
• 上級者向け
• CSSハック
• CSSテンプレート

Javascript

$(document).ready(function() {
	$(".navi1 dt").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default"); 
		});
	$(".navi1 dd").css("display","none");
	$(".navi1 dt").click(function(){
		$(this).next().toggle();
		});
});

開閉式のアコーディンの動き 2

CSS

• ビギナー向け
• 上級者向け
• CSSハック
• CSSテンプレート

Javascript

$(document).ready(function() {
	$(".navi2 dt").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default"); 
		});
	$(".navi2 dd").css("display","none");
	$(".navi2 dt").click(function(){
		$(this).next().slideToggle("fast");
		});
});

開閉式のアコーディンの動き 3

CSS

• ビギナー向け
• 上級者向け
• CSSハック
• CSSテンプレート

Javascript

$(document).ready(function() {
	$(".navi3 dt").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default"); 
		});
	$(".navi3 dd").css("display","none");
	$(".navi3 dt").click(function(){
		$(this).next().slideToggle("slow");
		});
});