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)
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();
}
});
});
