2024年06月13日
jquery：toggle()
このメソッドの説明
toggle() はjQueryメソッドです。
要素の開閉に利用されます。
メソッド
セレクタ.toggle( effect , options , duration , callback )
パラメータ
effect (文字列)（省略可）
要素を開閉する時のeffect(効果)を指定します。
options (文字列)（省略可）
effect 毎に定められた「オプション名」と「値 」を指定します。
指定方法は{ オプション名① : 値 , オプション名② : 値 }の形式で記述します。
duration (整数 | 指定パラメータ)（省略可）
開閉の実行時間
初期値：０（パラメータが何も指定されてない場合）
パラメータを指定した場合は：400ms
数値で指定する以外に下記の文字列でも可
・'slow' :600ms
・'normal':400ms
・'fast' :200ms
complete (関数)（省略可）
開閉の終了後に実行する関数
1.表示効果を指定しない事例
①パラメータを何も指定しないトグル
下記のボタンを挿入して下さい。開閉時間は0です。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p><button class='toggle01' style='padding:5px 10px;background:cyan'>トグルによる開閉</button></p>
<div class='toggle_target01' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.toggle01').parent().next().css('display','none');
$('.toggle01').click(function(){
$(this).parent().next().toggle();
});
});
</script>
■1～4行目：HTML
■ボタンがクリックされたら、ボタンの親の次の要素を開閉しています。
トグルプログラムを作成する上での注意点
トグルは1つの文書中に複数配置される事があります。
そこでトグルプログラムは、クリックされた要素を基準にparent()、children()、next()、prev()を使って操作する必要があります。
これにより、文書中に複数のトグルがあっても、操作が可能になります。
近隣要素の選択方法は 階層構造の要素セレクト操作 を参照してください。
②complete を指定したトグル
下記のボタンを挿入して下さい。
トグル後に、ボタンのテキストを変更します。
又、callbackパラメータを指定したので開閉時間は400msになります。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p><button class='toggle02' style='padding:5px 10px;background:cyan'>開く▼</button></P>
<div class='toggle_target02' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.toggle_target02').css('display','none');
$('.toggle02').click(function(){
$('.toggle_target02').toggle(function(){
var flg = $('.toggle_target02').css('display');
if(flg == 'block'){$('.toggle02').text('コンテンツを閉じる▲');}
else{$('.toggle02').text('開く▼');}
});
});
});
</script>
■9～13行目
トグルが完了して時に関数を実行し、コンテンツの表示/非表示に合わせてボタンの文字を変更しています。これを指定したので開閉時間は400msになります。
■開閉時間を0にする場合は9行目の指定を下記に変更します。
.toggle(function(){ ➡ .toggle(0,function(){
2.表示効果を指定した事例
下記の表示効果(エフェクト)を利用する為には JQuery UI が必要となります。
導入の仕方は、jQuery機能の追加 を参照してください。
| 項番 | JQuery UI | 説明 |
| ① | slide | BOXサイズがすべる様に移動する効果です。
スライドさせる方向と移動量が指定できます。 |
| ② | drop | BOXサイズ固定で移動しながら変化する効果です。
ドロップさせる方向が指定できます。 |
| ③ | blind | ブラインドを降ろす様な効果です。
ブラインドの方向が指定すできます。 |
| ④ | clip | 上下や左右にクリップする効果です。
クリップする方向を上下か左右を指定できます。 |
| ⑤ | fold | 上や左に縮める効果です。
縮めるサイズと方向を指定できます。 |
| ⑥ | fade | 徐々に消し、徐々に表示させる効果です。
パラメータはありません。 |
| ⑦ | scale | 縮小/拡大させる効果です。
縮小/拡大の基点を中心、左上、右下を選択できます。 sizeとの違いは、縮小方向を垂直や左右で指定できる点です。 |
| ⑧ | size | 縮小/拡大させる効果です。
縮小/拡大の基点を中心、左上、右下を選択できます。 scaleとの違いは、縮小後のサイズを指定できる事です。 |
| ⑨ | puff | 膨らませる効果です。
膨らませでなく、縮める効果も選択できます。 |
| ⑩ | bounce | バウンドさせる効果です。
バウンド量と回数を指定できます。 |
| ⑪ | explode | 要素を分割して爆破させる効果です。
分割数を指定できます。 |
| ⑫ | pulsate | 要素を点滅させる効果です。
点滅させる回数を指定できます。 |
| ⑬ | shake | 要素をシェイクする効果です。
振る方向、振り幅、回数を指定できます。 |
| ⑭ | highlight | 背景色を変更する効果です。
背景色の指定ができます。 |
スライド効果(BOXサイズがすべる様に移動)で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| direction | スライドする方向を指定する
{direction:'left'} : 左から表示し、左に非表示します。:デフォルト {direction:'right'} : 右から表示し、右に非表示します。 {direction:'up'} : 上から表示し、上に非表示します。 {direction:'down'} : 下から表示し、下に非表示します。 |
| distance | 移動量を数値で指定します。
幅が200pxの要素を横にスライドさせる場合、 デフォルトは、210ぐらいになります。 200にするとブラインドの様な動きになります。 300にすると画面から完全に消えるまでスライドします。 |
■指定方法は('slide',{direction：値, distance：値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■左から表示し、左に非表示します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect01' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target01' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target01').css('display','none');
$('.efect01').click(function(){
$('.efect_target01').toggle('slide' , 1000 );
});
});
</script>
■10～12行目
スライド効果でトグルしています。トグル時間は1秒
ドロップ効果(BOXサイズ固定で移動しながら変化)で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| direction | ドロップさせる方向を指定します。
{direction:'leftl'} : 左から表示し、左に非表示します。 {direction:'right'} : 右から表示し、右に非表示します。 {direction:'up'} : 上から表示し、上に非表示します {direction:'down'} : 下から表示し、下に非表示します。 |
■指定方法は('drop',{direction：値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■左から表示し、左に非表示します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect02' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target02' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target02').css('display','none');
$('.efect02').click(function(){
$('.efect_target02').toggle('drop' , 1000 );
});
});
</script>
■10～12行目
ドロップ効果でトグルしています。トグル時間は1秒
ブラインド(ブラインドを降ろす様な)効果で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| direction | ブラインドの方向を指定する
{direction:'vertical'} :上から表示し、上に非表示する。デフォルト {direction:'down'} :下から表示し、下に非表示する。 {direction:'horizontal'}:左から表示し、左に非表示する。 {direction:'right'} :右から表示し、右に非表示する。 |
■指定方法は('drop',{direction：値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■上から表示し、上に非表示します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect03' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target03' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target03').css('display','none');
$('.efect03').click(function(){
$('.efect_target03').toggle('blind' , 1000 );
});
});
</script>
■10～12行目
ブラインド効果でトグルしています。トグル時間は1秒
クリップ(上下や左右にクリップする様な)効果で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| direction | クリップの方向を指定します。
{direction:'vertical'} :中心から上下に表示し、上下から中心に非表示する。デフォルト {direction:'horizontal'}:中心から左右に表示し、左右から中心に非表示する。 |
■指定方法は('clip',{direction：値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■中心から上下に表示し、上下から中心に非表示します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect04' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target04' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target04').css('display','none');
$('.efect04').click(function(){
$('.efect_target04').toggle('clip' , 1000 );
});
});
</script>
■10～12行目
クリップ効果でトグルしています。トグル時間は1秒
ホールド(上や左に縮めるような)効果で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| size | 縮めた後のサイズ
数値で指定します。初期値は15px 見えなくする時は size:1 で指定します。 |
| horizFirst | 縮める順番
false：デフォルト 水平方向→垂直方向に表示し、垂直方向→水平方法に縮めて非表示します。 true 垂直方法→水平方向に表示し、水平方向→垂直方向に縮めて非表示します。 |
■指定方法は('fold',{size：値,horizFirst,真偽値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■水平方向、垂直方向に表示し、垂直方向、水平方法に縮めて非表示します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect05' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target05' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target05').css('display','none');
$('.efect05').click(function(){
$('.efect_target05').toggle('fold' , 1000 );
});
});
</script>
■10～12行目
ホールド効果でトグルしています。トグル時間は1秒
フェイド(徐々に消し、徐々に表示する様な)効果で要素をトグルします。一覧リストに戻る
ありません。
事例
■徐々に濃くなって表示し、徐々に薄くなって非表示します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect06' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target06' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target06').css('display','none');
$('.efect06').click(function(){
$('.efect_target06').toggle('fade' , 1000 );
});
});
</script>
■10～12行目
フェイド効果でトグルしています。トグル時間は1秒
スケール(縮小/拡大させる)効果で要素をトグルします。一覧リストに戻る
デフォルトではsizuと同じになります。
sizeとの違いは、縮小方向を垂直や左右で指定できる点です。
| オプション名 | 説明 |
| origin | 縮小/拡大する基点
中心：[ 'middle' , 'center' ]デフォルト 左上：[ 'top' , 'left' ] 右下：[ 'bottom' , 'right' ] |
| percent | 拡大するか縮小するか？を数値で指定します。
初期値：0 100未満は縮小 100以上は拡大 |
| direction | 縮小/拡大する方向
'both'：両方が対象（初期値） 'vertical'：水平方向の縮小/拡大 percentに0以外(例：1)を指定する必要がある。 'horizontal'：垂直方向の縮小/拡大 percentに0以外(例：1)を指定する必要がある。 |
| scale | スケールの対象要素
'both'：総ての要素を縮小対象とする（デフォルト） 'box'：要素のborderとpaddingを縮小対象とする。 'content':要素のテキストを縮小対象とする。 |
■指定方法は('scale',{origin：値, percent：値 ,・・・},アニメ時間,finction(){アニメ後の処理})で指定します。
事例
■中心から拡大して表示、中心に縮小して非表示します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect07' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target07' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target07').css('display','none');
$('.efect07').click(function(){
$('.efect_target07').toggle('scale' , 1000 );
});
});
</script>
■10～12行目
スライド効果でトグルしています。トグル時間は1秒
サイズ(縮小/拡大させる)効果で要素をトグルします。一覧リストに戻る
デフォルトではscaleと同じになります。
scaleとの違いは、縮小後のサイズを指定できる事です。
| オプション名 | 説明 |
| from | アニメーション開始のサイズ。 |
| to | アニメーション完了後のサイズ デフォルトは0
to:{width:n,height:m}で指定します。 注意点１：幅と高さは波括弧{}で括ります。 注意点２：これを指定すると収束点は['top','left'] になります。 |
| origin | 効果の収束点
中心：origin:['middle','center'] デフォルト 左上：origin:['top','left'] 注意点：角括弧[]で括ります。 右下：origin:['bottom','right'] 注意点：角括弧[]で括ります。 |
| scale | リスケールの対象要素
'both'：総ての要素を縮小対象とする（デフォルト） 'box'：要素のborderとpaddingを縮小対象とする。 'content':要素のテキストを縮小対象とする。 |
■指定方法は('size',{origin：値,・・・},アニメ時間,function{アニメ後の処理})で指定します。
事例
■中心から拡大して表示、中心に縮小して非表示します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect08' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target08' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target08').css('display','none');
$('.efect08').click(function(){
$('.efect_target08').toggle('size' , 1000 );
});
});
</script>
■10～12行目
サイズ効果でトグルしています。トグル時間は1秒
パフ(膨らませる)効果で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| percent | 膨らませるか萎ませるかを数値で指定します。
初期値は 150 なので膨らませ効果になります。 100未満を指定すると萎ませ効果になります。 |
■指定方法は('percent',{percent：値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■50%拡大から縮小して表示し、50%拡大し非表示します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect09' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target09' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target09').css('display','none');
$('.efect09').click(function(){
$('.efect_target09').toggle('puff' , 1000 );
});
});
</script>
■10～12行目
パフ効果でトグルしています。トグル時間は1秒
バウンス(バウンドさせる)効果で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| distance | バウンドの最大値をピクセル単位で指定します。
初期値：20 |
| times | バウンド回数を指定します。
初期値：5 |
■指定方法は('bounce',{distance:値,times:値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■要素をバウンドさせながら開閉します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect10' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target10' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target10').css('display','none');
$('.efect10').click(function(){
$('.efect_target10').toggle('bounce' , 1000 );
});
});
</script>
■10～12行目
バウンス効果でトグルしています。トグル時間は1秒
エクスブロウド(要素を分割して爆破させる)効果で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| pieces | 分割する個数を指定します
初期値：9（3×3） 取れる値は 4,9,16,25 の値です。 |
■指定方法は('explode',{pieces:値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■9分割から集めて表示し、9分割に分解して非表示する。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect11' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target11' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target11').css('display','none');
$('.efect11').click(function(){
$('.efect_target11').toggle('explode' , 1000 );
});
});
</script>
■10～12行目
エクスブロウド効果でトグルしています。トグル時間は1秒
パルセイト(要素を点滅させる)効果で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| times | 点滅させる回数
初期値：5 |
■指定方法は('pulsate',{times:値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■要素を点滅させながら開閉します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect12' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target12' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target12').css('display','none');
$('.efect12').click(function(){
$('.efect_target12').toggle('pulsate' , 1000 );
});
});
</script>
■10～12行目
パルセイト効果でトグルしています。トグル時間は1秒
シェイク(要素をシェイクする)効果で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| direction | 要素を始めに振る方向
初期値：'left' 上記以外に 'right' , 'up' , 'down' が選択可 |
| distance | 振り幅
初期値：20 |
| times | 振る回数
初期値：３ |
■指定方法は('shake',{direction:値,distance:値,times:値,},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■左右に振動して開閉します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect13' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target13' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target13').css('display','none');
$('.efect13').click(function(){
$('.efect_target13').toggle('shake' , 1000 );
});
});
</script>
■10～12行目
シェイク効果でトグルしています。トグル時間は1秒
ハイライト(背景色を変更する)効果で要素をトグルします。一覧リストに戻る
| オプション名 | 説明 |
| color | 背景色
初期値：'#ffff99' (クリアな黄) |
■指定方法は('highlight',{color:値},アニメ時間,function(){アニメ後の処理})で指定します。
事例
■背景色を黄色にした後、開閉します。
ここが表示/非表示します
上記のプログラムは下記から構成されています。
<p>
<button class='efect14' style='padding:5px 10px;background:cyan'>トグルによる開閉</button>
</p>
<div class='efect_target14' style='width:200px; height:100px;background:pink;'>
<div style=' padding:10px;'>エフェクトエリア<br>ここが表示/非表示します</div>
</div>
<script>
$(function(){
$('.efect_target14').css('display','none');
$('.efect14').click(function(){
$('.efect_target14').toggle('highlight' , 1000 );
});
});
</script>
■10～12行目
ハイライト効果でトグルしています。トグル時間は1秒
参考情報
①トグルに合わせてセレクト要素を変更する場合は .toggleClass() を参照してください。
これを利用すると、開閉前の図形と開閉後の図形を変更する事ができます。