jQuery API の toggle( booleanType ) は、引数 booleanType が、「true」の場合、指定した要素を表示し、「false」の場合、指定した要素を非表示にするメソッド。引数をスイッチ（switch）にして、表示／非表示を切り替えることができる。
記述方法
jQuery( セレクター ) . toggle( 論理型 );
「論理型」が、true の場合、「セレクター」の要素を表示する。
「論理型」が、false の場合、「セレクター」の要素を非表示にする。
実装例（サンプル）
toggle( booleanType ) ボタンをクリックすると:
クリック２回につき、１回だけ出現。
クリック３回につき、１回だけ出現。
実装例（サンプル）の動作について
- 「 toggle( booleanType ) 」ボタンを２回クリックすると、１回だけ、「クリック２回につき、１回だけ出現。」という赤色のテキストを表示する。
- 「 toggle( booleanType ) 」ボタンを３回クリックすると、１回だけ、「クリック３回につき、１回だけ出現。」という青色のテキストを表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
var count = 0;
jQuery( '#jquery-api-toggle' ) . click( function() {
count++;
jQuery( '#jquery-api-toggle-contents-2' ) . toggle( count % 2 == 0 );
jQuery( '#jquery-api-toggle-contents-3' ) . toggle( count % 3 == 0 );
} );
} );
// -->
</script>
<!--
jQuery( function() {
var count = 0;
jQuery( '#jquery-api-toggle' ) . click( function() {
count++;
jQuery( '#jquery-api-toggle-contents-2' ) . toggle( count % 2 == 0 );
jQuery( '#jquery-api-toggle-contents-3' ) . toggle( count % 3 == 0 );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-toggle-contents-2 {
display: none;
color: red;
}
#jquery-api-toggle-contents-3 {
display: none;
color: blue;
}
-->
</style>
<!--
#jquery-api-toggle-contents-2 {
display: none;
color: red;
}
#jquery-api-toggle-contents-3 {
display: none;
color: blue;
}
-->
</style>
HTML
<p><button id="jquery-api-toggle">toggle( booleanType )</button></p>
<p>toggle( booleanType ) ボタンをクリックすると:</p>
<p id="jquery-api-toggle-contents-2">クリック２回につき、１回だけ出現。</p>
<p id="jquery-api-toggle-contents-3">クリック３回につき、１回だけ出現。</p>
<p>toggle( booleanType ) ボタンをクリックすると:</p>
<p id="jquery-api-toggle-contents-2">クリック２回につき、１回だけ出現。</p>
<p id="jquery-api-toggle-contents-3">クリック３回につき、１回だけ出現。</p>