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

プレビュー

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

コード

HTML

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

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 {
    background-color:#7CADB6;
    border-bottom:1px solid #fff;
    cursor:pointer;
}

dl dd {
    border:1px solid #7CADB6;
    border-top:none;
    height:300px;
}

ポイント

• スライドアニメーション：slideUp()、slideDown()
• $('+dd',this)は、クリックされたdt要素の次に登場するdd要素を指す