2011.07.14

jQueryによるトグル処理

AUTHOR

jQueryによるトグル処理

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

例えば
#buttonの要素をクリックするたびに
#textの要素を表示/非表示させたい場合。

<p id="button">これは#buttonの内容です。</p> ←ここをクリック
<p id="text">これは#textの内容です。</p> ←これを表示/非表示させたい

上記のHTMLを用意したら、
「jQuery」と「下記の内容を入力したjsファイル」を読み込むだけで完了です。

$(function(){
$("#button").click(function(){
$("#text").toggle();
});
});

たったこれだけ。
以下がサンプルです。

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

これは#textの内容です。

さらに「toggleClass() :クラスの追加/削除」を同時に実行すればもっと便利です。
また「toggle()」へ「fast」や「slow」を追加すれば滑らかに表示/非表示が行われます。

$(function(){
$("#button").click(function(){
$(this).toggleClass('on'); ←class="on"を追加/削除
$("#text").toggle('fast'); ←fastを追加で滑らかに表示/非表示
});
});

そのクラス追加/削除を利用しボタンの背景画像などの設定しました。
以下がサンプルです。

これは#textの内容です。

上記のように#textを初めは非表示にしたい場合は#textにCSSで「display: none」を指定してあげればOKです。
#buttonへは「cursor: pointer」を設定してあげればボタンであることが分かりやすいです。

戸田@ドアズ社長ブログ

  • No items
PAGE TOP