jQuery API の toggle( fn1, fn2[, fn3, fn4, ･･･] ) は、クリックイベントに複数のイベントハンドラを順番にバインドしたいときに便利なメソッドだ。
要素をクルックする度に、toggle( fn1, fn2[, fn3, fn4, ･･･] ) の引数に指定したイベントハンドラを順番に呼び出すことができる。
「jQuery Version 1.8」で非推奨になった。
「jQuery Version 1.9」で廃止された。
記述方法
jQuery( セレクター ) . toggle( イベンドハンドラ１, イベンドハンドラ２, イベンドハンドラ３ );
「セレクター」の要素のクリックイベントに、「イベンドハンドラ１」「イベンドハンドラ２」「イベンドハンドラ３」をバインド。
「セレクター」の要素をクリックすると、「イベンドハンドラ１」を実行、２回目のクリック時は、「イベンドハンドラ２」を実行、３回目のクリック時は、「イベンドハンドラ３」を実行。
実装例（サンプル）
黄色
実装例（サンプル）の動作について
黄色のボックスをクリックすると、背景色が、赤色、青色、緑色、黄色の順番で変化する。中央のテキストも、赤色、青色、緑色、黄色の順番で置き換わる。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . toggle(
function() {
jQuery( this ) . css( 'backgroundColor', 'red' );
jQuery( '#jquery-api-toggle-text' ) . text( '赤色' );
},
function() {
jQuery( this ) . css( 'backgroundColor', 'blue' );
jQuery( '#jquery-api-toggle-text' ) . text( '青色' );
},
function() {
jQuery( this ) . css( 'backgroundColor', 'green' );
jQuery( '#jquery-api-toggle-text' ) . text( '緑色' );
},
function() {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
jQuery( '#jquery-api-toggle-text' ) . text( '黄色' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . toggle(
function() {
jQuery( this ) . css( 'backgroundColor', 'red' );
jQuery( '#jquery-api-toggle-text' ) . text( '赤色' );
},
function() {
jQuery( this ) . css( 'backgroundColor', 'blue' );
jQuery( '#jquery-api-toggle-text' ) . text( '青色' );
},
function() {
jQuery( this ) . css( 'backgroundColor', 'green' );
jQuery( '#jquery-api-toggle-text' ) . text( '緑色' );
},
function() {
jQuery( this ) . css( 'backgroundColor', 'yellow' );
jQuery( '#jquery-api-toggle-text' ) . text( '黄色' );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-toggle {
width: 100%;
height: 200px;
background-color: yellow;
border-radius: 10px;
}
#jquery-api-toggle p {
padding-top: 80px;
text-align: center;
font-size: 30px;
}
#jquery-api-toggle-text {
color: #000000;
background-color: #ffffff;
padding: 10px;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-api-toggle {
width: 100%;
height: 200px;
background-color: yellow;
border-radius: 10px;
}
#jquery-api-toggle p {
padding-top: 80px;
text-align: center;
font-size: 30px;
}
#jquery-api-toggle-text {
color: #000000;
background-color: #ffffff;
padding: 10px;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-api-toggle"><p><span id="jquery-api-toggle-text">黄色</span></p></div>