Web制作の現場で使えるjQuery　UIデザイン入門 ― 第14回

jQueryでアコーディオンパネルUIを自作する

2009年10月09日 13時00分更新

文● 西畑一馬／to-R

飾りを付けてより分かりやすく、グラフィカルに！

　サンプル01でとりあえずアコーディオンパネルの基本はできましたので、今度はより分かりやすく、グラフィカルなUIにブラッシュアップしましょう。変更するのは、（1）現在開いているラベルの色、（2）閉じているラベルにマウスカーソルが重なったとき（マウスオーバー時）の色、（3）マウスカーソルの形状――の3点です。

　新たに追加するCSSを以下に示します。dt.overがマウスオーバー時、dt.selectedが選択時のラベルのCSSです。背景画像を変更し、dt.overにはcursor:pointer;を追加してマウスカーソルをポインター（指の形）に変更しています。CSSファイル内のdt.overの後にdt.selectedを記述することで、表示中のパネルのラベル部分にマウスが重なってもマウスオーバーのスタイルは適用されません。

▼サンプル02（CSSの追加部分）


dt.over{
    background:url("images/background-over.jpg");
    cursor:pointer;
}
dt.selected{
    background:url("images/background_selected.jpg");
    cursor:default;
    color:black;
}

　スクリプト部分は以下のように変更します。

▼サンプル02（スクリプト部分）


$(function(){
    $("dd:not(:first)").css("display","none")
    $("dt:first").addClass("selected");
    $("dl dt").click(function(){
        if($("+dd",this).css("display")=="none"){
            $("dd").slideUp("slow");
            $("+dd",this).slideDown("slow");
            $("dt").removeClass("selected");
            $(this).addClass("selected");
        }
    }).mouseover(function(){
        $(this).addClass("over");
    }).mouseout(function(){
        $(this).removeClass("over");
    })
})

　変更後のスクリプトでは、初期状態で表示されている1番目のパネルのラベル部分にclass属性「selected」を追加し、選択状態のCSS「dt.selected」を適用します。


$("dt:first").addClass("selected");


dt.selectedが適用され、1番目のラベルのスタイルが変更される

　クリックされたdt要素にのみ、選択状態のスタイル（dt.selected）を適用するため、clickイベントの処理に以下の2つの命令を追加します。まず、dt要素に対して設定されているclass属性「selected」をいったん取り除き、次にクリックされたdt要素に対してclass属性「selected」を追加し直します。


$("dt").removeClass("selected");
$(this).addClass("selected");


クリックされたラベルのスタイルが変更される

　マウスオーバー効果を付けるため、新たにmouseover()イベント、mouseout()イベントを設定します。ラベルにマウスが重なると、dt要素にclass属性「over」を追加し、外れるとclass属性を取り除きます。これで、新たに追加したCSSをイベントの発生に応じて適用できます。


$("dl dt").click(function(){
    (中略)
}).mouseover(function(){
    $(this).addClass("over");
}).mouseout(function(){
    $(this).removeClass("over");
})