doors internet service コーポレートサイトはこちら doors internet service コーポレートサイトはこちら

jQueryによるトグル処理

トピックス

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

これは#textの内容です。

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