jQueryでアコーディオン（改良版）作ってやんよ!!

なんだかんだでスマホサイトに必須になってる感じでよく作るハメになっているのでスマホ用アコーディオン決定版として、汎用性の高いアコーディオンテンプレを作ってみた。

デモページ

実際のスクリプトを実装してデモページがこちら

改良版の主な仕様

• 1.開閉時に切り替わるアイコン画像を付けられる事。
• 2.タイトル部のテキストを１行と２行に使い分けられる事。
• 3.タイトル部のテキスト位置の微調整は不要にする事。

HTMLの記述

<dl><dt class="accordion"><span class="Text01">短いタイトル</span></dt><dd>コンテンツ入るYO！</dd><dt class="accordion"><span class="Text02">長～～～～～い
タイトル</span></dt><dd>コンテンツ入るYO!!</dd></dl>

CSSの記述

dt.accordion{
    width: 100%;
    height: 50px;
	color:#FFFFFF;
    background:#333 url(bg_bar.png) no-repeat;
    -webkit-background-size:100%;
}

dt.accordion.opened {
    background-image:url(icon.png), url(bg_bar.png);
    background-repeat: no-repeat,no-repeat;
    //background-position:0% 0%,0% 0%;
    //-webkit-background-size:0% 0%,100%;
}

dd {
    width: 100%;
    background: url(icon02.png) no-repeat;
}

.Text01{
        line-height:50px;
        display: -webkit-box;
        display: -o-box;
        display: -moz-box;
        display: box;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        box-pack: center;
}

.Text02{
        line-height:25px;
        display: -webkit-box;
        display: -moz-box;
        display: -o-box;
        display: box;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        box-pack: center;
}

JavaScriptの記述

$(function(){
    $(".accordion").not(".opened").next().hide();
    $(".accordion").click(function(){
$(this).toggleClass("opened").next().slideToggle();
});
});

結構使えるんじゃないかな？