【jQuery】アコーディングメニューの作り方と考え方

以下のコラムを利用して、アコーディングメニューを作ります。

制作例（ソース）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオン</title>
<style>
*{
    margin:0;
    padding:0;
}
dl{
    width:400px;
    margin:50px auto;
}
dl dt{
    background:#7CADB6;
    border-bottom:1px solid #FFFFFF;
    cursor:pointer;
    padding:10px;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo ,sans-serif;
}

p{
  padding:10px;
}

dl dd{
    border:1px solid #7CADB6;
    border-top:none;
    height:300px;
}
</style>
<script src="../../js/jquery-1.11.1.min.js"></script>
</head>
<body>

<dl>
<dt>テキスト1</dt>
<dd>
<p>テキスト...（中略）...テキスト</p>
</dd>
<dt>テキスト2</dt>
<dd>
<p>テキスト...（中略）...テキスト</p>
</dd>
<dt>テキスト3</dt>
<dd>
<p>テキスト...（中略）...テキスト</p>
</dd>
<dt>テキスト4</dt>
<dd>
<p>テキスト...（中略）...テキスト</p>
</dd>
</dl>


<script>
$(document).ready(function(){

$('dd:not(:first)').css('display','none');//一行目意外隠す

$('dl dt').click(function(){//クリックする

  if($('+dd',this).css('display')=='none'){//クリックされたdtのとなりのddが閉じられてたら

$('dd').slideUp('slow');//となりが無かった時にddがスライドアップ
$('+dd',this).slideDown('slow');//となりに閉じられたddがある時スライドアップ
}
});
});
</script>

</body>
</html>