jQuery API の toggle() は、指定した要素が非表示の場合、その要素を表示し、指定した要素が表示されている場合、その要素を非表示にするメソッド。
記述方法
jQuery( セレクター ) . toggle();
「セレクター」の要素が非表示の場合、「セレクター」の要素を表示する。
「セレクター」の要素が表示されている場合、「セレクター」の要素を非表示にする。
実装例（サンプル）
toggle() ボタンをクリックすると: 出現
実装例（サンプル）の動作について
- 「 toggle() 」ボタンをクリックすると、「toggle() ボタンをクリックすると: 」の右側に、「出現」という赤色のテキストを表示する。
- 「 toggle() 」ボタンを再度クリックすると、「toggle() ボタンをクリックすると: 」の右側の「出現」という赤色のテキストを非表示にする。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . click( function() {
jQuery( '#jquery-api-toggle-contents' ) . toggle();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . click( function() {
jQuery( '#jquery-api-toggle-contents' ) . toggle();
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-toggle-contents {
display: none;
color: red;
}
-->
</style>
<!--
#jquery-api-toggle-contents {
display: none;
color: red;
}
-->
</style>
HTML
<p><button id="jquery-api-toggle">toggle()</button></p>
<p>toggle() ボタンをクリックすると: <span id="jquery-api-toggle-contents">出現</span></p>
<p>toggle() ボタンをクリックすると: <span id="jquery-api-toggle-contents">出現</span></p>