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

プレビュー

↓スマートフォンの方はこちらからプレビューできます。
jQueryで作るアコーディオンパネルpart2 - js do it

コード

HTML

<div id="container">
<dl>
<dt>【ゆく河の流れ】</dt>
<dd>　ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうたかたは、かつ消え､かつ結びて、久しくとどまりたる例(ためし)なし。世の中にある人と､栖(すみか)とまたかくのごとし。</dd>
<dt>【安元の大火】</dt>
<dd>　予（われ）、ものの心を知れりしより、四十（よそぢ）あまりの春秋（しゅんじう）をおくれるあひだに、世の不思議を見る事ややたびたびになりぬ。</dd>
<dt>【治承の辻風】</dt>
<dd>　また、治承（ぢしよう）四年卯月（うづき）のころ、中御門京極（なかみかどきやうごく）のほどより大きなる辻風（つじかぜ）起こりて、六条わたりまで吹けることはべりき。</dd>
</dl>
</div>

JavaScript

$(function(){
    $('dd:not(:first)').css('display','none');
    $('dl dt').click(function(){
	if($('+dd',this).css('display')=='none'){
	    $('dd').slideUp('slow');
	    $('+dd',this).slideDown('slow');
	}
    });
});

CSS

@charset "utf-8";

*{
    margin:0;
    padding:0;
}

dl {
    width:400px;
    margin:50px auto;
}

dl dt {
    font-weight:bold;
    background-color:#369;
    border-bottom:1px solid #fff;
    cursor:pointer;
    color:#fff;
    padding:8px;
	
}

dl dd {
    border:1px solid #369;
    border-top:none;
    height:100px;
    padding:12px;
}