読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

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;
}