[jQuery]イベントに応じて要素の表示、非表示を切り替える（アコーディオン）

jQueryを使用して、要素の表示と非表示を切り替えるには、toggleやslideToggle関数を使うと簡単に実現出来ます。

toggle関数は、引数を指定しないで呼び出してあげるとその要素の表示(show)と非表示(hide)を繰り返してくれます。
slideToggle関数を使うと、非表示にするときには徐々に消えていき、表示するときにはにょきにょきでてきます。

引数なしでtoggleとslideToggleを使ってみる

以下のhtmlをdiv部分をボタンクリックイベントで表示、表示を切り替えてみましょう。

<input type="button" value="表示・非表示切り替え" id="btn">

<div id="view">
この部分の表示、非表示を切り替えます。
</div>

toggle関数を使用すると、非常に簡単に表示、非表示を切り替えられますね。

$(function () {
    $('input#btn').click(function () {
        $('div#view').toggle();
    });
})

slideToggleもtoggleと使い方は基本的に同じ。

$(function () {
    $('input#btn').click(function () {
        $('div#view').slideToggle();
    });
})

表示、非表示の速度を変えてみる

toggleとslideToggleの引数には、ミリ秒と速度を示す文字列を指定出来ます。

ミリ秒を指定した場合は、その時間をかけて非表示になったり表示したりしてくれます。
文字列は、「Slow」、「Normal」、「Fast」の3種類が指定できまる。
以下のように、文字列通の動作をします。ミリ秒指定と比べるとかなりおおざっぱな感じですね。
* Slow:ゆっくりした動作
* Normal:普通の動作
* Fast:早い動作

使い方の例。この例だと2秒間かけて表示と非表示されます。

$(function () {
    $('input#btn').click(function () {
        $('div#view').slideToggle(2000);
    });
})

文字列指定の場合は、こんな感じです。

$(function () {
    $('input#btn').click(function () {
        $('div#view').toggle('fast');
    });
})