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

ウェブ学のすすめ

Study of Web Design & Programing

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要素を指す