もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第3回 アコーディオンパネルの実装

この記事を読むのに必要な時間:およそ 4 分

表示非表示をスライドアニメーションを使って行う

さきほどのサンプルではアニメーションは使わずに,表示非表示を切り替えていましたが,ここではスライドアニメーションを使って切り替えてみましょう。といっても,jQueryを使う場合スライドアニメーションはとても簡単に実装できます。show(), hide()としていた箇所をslideDown(), slideUp()にするだけです。

スライドアニメーション - HTML

<dl id="sample3">
    <dt>アコーディオンヘッダ</dt>
    <dd>アコーディオンコラム</dd>
    <dt>アコーディオンヘッダ</dt>
    <dd>アコーディオンコラム</dd>
    <dt>アコーディオンヘッダ</dt>
    <dd>アコーディオンコラム</dd>
</dl>

スライドアニメーション - CSS

dl {
    width: 300px;
}
dt, dd {
    padding: 5px;
}
dt {
    color: #fff;
    background: #252525;
}
dd {
    background: #eee;
}

スライドアニメーション - JS

$(function(){
    $('dt','#sample3').click(function(){
        var next = $(this).next().hide();
        if(next.is(':visible')){
            next.slideUp();
        }else{
            next.slideDown();
        }
    });
});

ところで,slideUp(), slideDown()は()に'fast', 'slow', ミリセカンド(1000で1秒)を引数として実行することでアニメーションの速度を変えることができます。slowは610ミリセカンド,デフォルト(空)はnormalで410ミリセカンド,fastは210ミリセカンドに相当します。

速度を指定したslideUp, slideDown - JS

next.slideUp('fast');
next.slideDown(400);

表示するDD要素をひとつにする

次はいずれかのDT要素がクリックされたら,既に開いているDD要素を閉じて,クリックされたDT要素の次のDD要素を表示,というものを実装してみましょう。難しく考えることはありません。HTMLはさきほどと同じものを使います。

スライドアニメーション - JS

$(function(){
    var dd = $('dd','#sample3');
    dd.hide();
    
    $('dt','#sample3').click(function(){
        var next = $(this).next();
        dd.not(next).slideUp();
        if(next.is(':visible')){
            next.slideUp();
        }else{
            next.slideDown();
        }
    });
});

DD要素を指定する機会が増えたので変数から参照できるようにします。同じように何度も$(セレクタ)から要素を取得するのは効率が悪くなるので,2回以上使う場合は,前もって変数から参照できる状態にしておくと良いでしょう。

ここではひとつだけ,見慣れないnot()というものを使っているので,簡単に説明します。

not()

notメソッドは対象の要素群から条件に一致しないものを省いた状態で要素を返します。前回,セレクタで:not()が出てきましたが,それとは違うものになります。

例えば今回の例では,dd.not(next)となっています。ddは#sample3の中のDDを全て指し,nextはクリックされたDTの次のDDのことです。つまり,#sample3のDDの中から「クリックされたDTの次のDD以外を省いた」DDを表します。

これはどういうことかと言うと,全てのDDを閉じてしまったのでは,DTクリック後に全てのDDは非表示になっているということで,結局次のDDを開くことになるので,クリックした次のDDを閉じたいときに,不具合が生じてしまいます。それを回避するために,クリックしたDTの次のDD要素を閉じる一覧から抜いているのです。

DL以外の要素でアコーディオンを実装する

と言っても,やはり難しいことはなく,単純に対象にする要素を変えるだけです。

DL以外の要素でアコーディオンを実装する - HTML

<div id="sample4">
<h2>アコーディオンヘッダ</h2>
<p>アコーディオンコラム</p>
<h2>アコーディオンヘッダ</h2>
<p>アコーディオンコラム</p>
<h2>アコーディオンヘッダ</h2>
<p>アコーディオンコラム</p>
</div>

DL以外の要素でアコーディオンを実装する - JS

$(function(){
    var p = $('p','#sample4');
    p.hide();
    
    $('h2','#sample3').click(function(){
        var next = $(this).next();
        p.not(next).slideUp();
        if(next.is(':visible')){
            next.slideUp();
        }else{
            next.slideDown();
        }
    });
});

基本部分は同じです。このように,not()とnext()があれば基本的なアコーディオンパネルは簡単に実装できます。

次回はグローバルナビゲーションでよく使われる階層ドロップダウンナビゲーションを実装してみましょう。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/