jQueryでアコーディオンパネルを作る

アコーディオンパネルの作成

ソースファイル

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<link rel="stylesheet" href="css/style.css">
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
// $('dd').css('display', 'none');
// $('dd').hide();
// $('dd:first').slideDown('slow');
$('dd:not(:first)').hide(); //一番上のdd以外は非表示にする
$('.acco>dt').on('click',function(){//"acco"(dl)の1階層下のdtがclickされたら以下を実行
if($($(this).next()).css('display') === 'none'){//clickされたdtの次要素ddが非表示なら
$('dd').slideUp('slow');//全てのddをスライドアップして非表示にし、
$('+dd',this).slideDown('slow');//clickされたdt直後の要素ddをスライドアップで表示
}
});

/*
$('dd:not(:first)').css('display','none');//一番上のdd以外は非表示にする
$('dl dt').on('click',function(){//dlの下の階層のdtがclickされたら以下を実行
if($($(this).next()).css('display') === 'none'){//clickされたdtの次要素ddが非表示なら
$('dd').slideUp('slow');//全てのddをスライドアップして非表示にし、
$($(this).next()).slideDown('slow');//clickされたdtの次要素ddをスライドアップで表示
}
});
*/
});
</script>
</head>

<body>
<div id="container">
<dl class="acco">
<dt>項目 1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
html,body,dl,dt,dd {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "游ゴシック", YuGothic,
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
font-weight: 500;
}

#container {
width: 500px;
margin: 0 auto;
}
dt {
height: 50px;
text-align: center;
line-height: 50px;
background: blue;
border: solid 1px #000;
font-weight: bold;
}
dd {
height: 80px;
border: solid 1px #000;
border-top: none;
padding: 10px 1em;
}