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

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

jQueryを利用してナビゲーションを実装する

第3回・4回はナビゲーションの実装について説明していきます。今回はアコーディオンパネルと呼ばれるナビゲーションに注目して、プラグインを使わずに作成してみましょう。

本連載では、タイトル部分をクリックやホバーなどのトリガーによって、その下の閉じられていた要素(弟要素)をスライドアニメーションなどで開くようなものをアコーディオンパネルとします。

今回の記事で使うメソッドの紹介と簡単な説明

本題に入る前に、まずはアコーディオンパネルを実装するにあたって必要になるメソッドを紹介しておきます。メソッドとは$(セレクタ)で得られたjQueryオブジェクト(要素)に対して、$().method()のように実行する「method()」の部分を指します。以下method()やmethodメソッドなどと表記していますが、同じ意味です。

click()

clickメソッドは対象のjQueryオブジェクトのclickイベントに任意の関数をbindしていくメソッドです。clickメソッド内では$(this)でイベントを追加するjQueryオブジェクトを指定できます。また、text()で、対象のjQueryオブジェクトに含まれる文字列を得ることができるので、button要素をクリックするとconsoleには「sample button」と表示されることになります。

click() - HTML
<button id='sample1'>sample button</button>
click() - JS
$(function(){
    $('#sample1').click(function(){
        console.log($(this).text());
    });
});

next()

nextメソッドは対象のjQueryオブジェクトの弟要素(次の要素)を得るメソッドです。

next() - HTML
<dl>
    <dt>兄要素</dt>
    <dd>弟要素</dd>
</dl>
next() - JS
$(function(){
    console.log($('dt').next());
});
next() - 実行結果(console)
next() - 実行結果(console)

show()、hide()、is()

show、hideメソッドは対象のjQueryオブジェクトの表示非表示を切り替えるメソッドです。また、isメソッドは指定したセレクタに合う要素を選択します。ここでは上で紹介したメソッドと組み合わせたサンプルを用意してみました。

show(), hide(), is() - HTML
<dl id="sample2">
    <dt>ここをクリック</dt>
    <dd>ここの表示非表示が切り替わる</dd>
</dl>
show(), hide(), is() - JS
$(function(){
    $('dt','#sample2').click(function(){
        var next = $(this).next();
        // nextメソッドで次の要素を得たものにをnextで参照する
        if(next.is(':visible')){
        // 前回説明した:visibleセレクタを利用して状態を見る
        // nextが:visible、つまり表示されているなら非表示に
            next.hide();
        }else{
        // nextが:visibleでなければ、つまり非表示なら表示する
            next.show();
        }
    });
});

お気づきの方もいるかもしれませんが、上記のサンプルがまさにアコーディオンパネルになっています。初期状態でDD要素を非表示にしたい場合は、hide()を使います。

DDを非表示 - JS
$(function(){
    $('dd','#sample3').hide();
    // DD要素を非表示にする
    $('dt','#sample3').click(function(){
        var next = $(this).next();
        if(next.is(':visible')){
            next.hide();
        }else{
            next.show();
        }
    });
});

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

さきほどのサンプルではアニメーションは使わずに、表示非表示を切り替えていましたが、ここではスライドアニメーションを使って切り替えてみましょう。といっても、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()があれば基本的なアコーディオンパネルは簡単に実装できます。

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

おすすめ記事

記事・ニュース一覧