[jQuery] 要素の表示非表示を切り替える（.toggle）

投稿日：2017年9月18日更新日：2018年4月28日

要素の表示非表示を切り替えるには、.toggle()を使用します。

サンプルソース

例）ボタンを押す毎に、要素(id="hoge")の表示非表示を切り替える

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(){
    $('#hoge').toggle(500);  //0.5秒かけて表示を切り替える
  });
});
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン">
  <div id="hoge">あいう</div>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(){

$('#hoge').toggle(500); //0.5秒かけて表示を切り替える

});

</script>

</head>

<body>

</body>

</html>

実行サンプル

動作確認ができます。

あいう

解説

.toggle()は、表示中の場合は非表示に、非表示中の場合は表示にするメソッドです。
引数にはアニメーションにかける時間をミリ秒で指定します。
例）1秒かけてアニメーションする場合→1000
アニメーションが不要な場合は引数は未指定でOKです。
表示のみ、非表示のみを行いたい場合は以下ページをご覧ください。
→ [jQuery] 画面の要素を表示したり消したりする（.hide、.show）

執筆者：とら