jQueryによるトグル処理

トグル処理はON／OFF交互に入れ替わるような処理のことです。
jQueryの「toggle()　：表示／非表示」を使用すればすごく簡単に実装できます。

例えば
#buttonの要素をクリックするたびに
#textの要素を表示／非表示させたい場合。
[php]<p id="button">これは#buttonの内容です。</p>　←ここをクリック
<p id="text">これは#textの内容です。</p>　←これを表示／非表示させたい[/php]
上記のHTMLを用意したら、
「jQuery」と「下記の内容を入力したjsファイル」を読み込むだけで完了です。[php]
$(function(){
$("#button").click(function(){
$("#text").toggle();
});
});[/php]たったこれだけ。
以下がサンプルです。

これは#buttonの内容です。　←ここをクリック

これは#textの内容です。

さらに「toggleClass()　：クラスの追加／削除」を同時に実行すればもっと便利です。
また「toggle()」へ「fast」や「slow」を追加すれば滑らかに表示／非表示が行われます。[php]
$(function(){
$("#button").click(function(){
$(this).toggleClass(‘on’);　←class="on"を追加／削除
$("#text").toggle(‘fast’);　←fastを追加で滑らかに表示／非表示
});
});[/php]そのクラス追加／削除を利用しボタンの背景画像などの設定しました。
以下がサンプルです。