<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryでアコーディオンメニュー</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
dl{
width:300px;
margin:50px auto;
}
dl dt{
background:#7CADB6;
border-bottom:1px solid #FFFFFF;
cursor:pointer;
line-height: 1.8em;
}
dl dd{
border:1px solid #7CADB6;
border-top:none;
height:150px;
}
</style>
</head>
<body>
<dl>
<dt>テキスト1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>テキスト3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
</body>
</html>