<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>アコーディオンメニュー</title>
</head>
<body>
	<div id="container">
		<dl>
			<dt>サンプル1</dt>
			<dd>
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</dd>
			<dt>サンプル2</dt>
			<dd>
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</dd>
			<dt>サンプル3</dt>
			<dd>
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</dd>
		</dl>
	</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</body>
</html>
*{
	margin:0;
	padding:0;
}
dl{
	width:400px;
	margin:50px auto;
}
dl dt{
	background:#829FD9;
	border-bottom:1px solid #FFFFFF;
	cursor:pointer;
}
dl dd{
	border:1px solid #829FD9;
	border-top:none;
	height:300px;
}
$(function(){
	$("dd").css("display","none");
	$("dl dt").click(function() {
		if($("+dd",this).css("display")=="none") { //クリックされた要素の次に登場するdd要素がdisplay:noneの場合の処理
			$("dd:visible").slideUp("fast"); //開いているdd要素は閉じる
			$("+dd",this).slideDown("fast"); //クリックされたddを展開する
		}
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.