jQueryでアコーディオンメニュー


<!DOCTYPE html>
<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>	
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<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>