jQueryでtoggleメソッドを使って要素の表示・非表示を切り替える方法

プログラミング初心者向けに、jQueryのtoggleメソッドを使って要素の表示・非表示を切り替える方法について解説しています。Webサイトを作成する上で必要になってくる知識なので、今すぐ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryでtoggleメソッドを使って要素の表示・非表示を切り替える方法を説明します。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

 

toggleとは

toggleメソッドはアコーディオンメニューを実現する上でとても有効になります。押したらすらすらと降りてくるメニュー、ご存知でしょうか。

今やレスポンシブデザインが当たり前になり、見かけることも多くなったことでしょう。

toggle系のメソッドはいくつかあるので、一つずつ説明していきます。

 

大石ゆかり

田島メンター!メニューをクリックすると表示されたり、非表示になったりするものがあるんですけど、あれはjQueryで実装出来ないんでしょうか?

田島悠介

今回紹介するtoggleメソッドがいいね!

大石ゆかり

toggleメソッドは、表示してくれるメソッドですか?それとも非表示にしてくれるメソッドですか?

田島悠介

showメソッド(表示)、hideメソッド(非表示)っていうのがあるんだけど、toggleメソッドはその時に応じて表示・非表示を切り替えてくれるんだよ。さっそく書いてみよう!

 

「slideToggle」

押すと降りてくるメニューを実装できます。アコーディオンメニューというものです。

「fadeToggle」

タブメニューを実現できます。タブで内容を切り替えることができます。

「toggleClass」

ON、OFFを切り替える動きを得意とします。これで、どの階層が選ばれているのかわかりますね。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

toggleの書き方

上記の3つはどれも簡単なので、すべて実装してみましょう。

それぞれの書き方を紹介します。

「slideToggle」

$("#acMenu dt").on("click", function() {
  $(this).next().slideToggle();
});

「fadeToggle」

$("#tabMenu li a").on("click", function() {
  $("#tabBoxes div").hide();
  $($(this).attr("href")).fadeToggle();
  return false;
});

「toggleClass」

$("#acMenu dt").on("click", function() {
  $(this).next().slideToggle();
  $(this).toggleClass("active");
});

このように少ない行数で、メニューバーなどのレスポンシブなWebページを作ることができます。

 

実際に書いてみよう

実際にソースコードを書いてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="sample.js" type="text/javascript"></script>
    <title>jQuery</title>
  </head>
  <body>
    <!-- slideToggle -->
    <div id="sample01">
      <dl id="acMenu">
        <dt>アコーディオンメニュー</dt>
          <dd>openメニュー</dd>
        <dt>アコーディオンメニュー</dt>
          <dd>openメニュー</dd>
        <dt>アコーディオンメニュー</dt>
          <dd>openメニュー</dd>
      </dl>
    </div>
    <!-- fadeToggle -->
    <div id="sample02">
      <ul id="tabMenu" class="clearfix">
        <li><a href="#tabBox1">メニュー1</a></li>
        <li><a href="#tabBox2">メニュー2</a></li>
        <li><a href="#tabBox3">メニュー3</a></li>
      </ul>
      <div id="tabBoxes">
        <div id="tabBox1">ボックス1</div>
        <div id="tabBox2">ボックス2</div>
        <div id="tabBox3">ボックス3</div>
      </div>
    </div>
    <!-- toggleClass -->
    <div>
      <dl id="acMenu2">
        <dt>アコーディオンメニュー</dt>
          <dd>openメニュー</dd>
        <dt>アコーディオンメニュー</dt>
          <dd>openメニュー</dd>
        <dt>アコーディオンメニュー</dt>
          <dd>openメニュー</dd>
      </dl>
    </div>
  </body>
</html>

CSS

#acMenu dt{
  display:block;
  width:200px;
  height:50px;
  line-height:50px;
  text-align:center;
  border:#5bc0de 1px solid;
  cursor:pointer;
 }

#acMenu dd{
  background:#d9534f;
  width:200px;
  height:50px;
  line-height:50px;
  text-align:center;
  border:#5bc0de 1px solid;
  display:none;
}

#tabMenu ul{
  width:600px;
}

#tabMenu li{
  float:left;
}

#tabMenu li a{
  display:block;
  width:198px;
  height:48px;
  line-height:50px;
  text-align:center;
  border:#5bc0de 1px solid;
}

#tabBox1,#tabBox2,#tabBox3{
  width:598px;
  height:300px;
  border:#5bc0de 1px solid;
}

#tabBox1{
  background:#5bc0de;
}

#tabBox2{
  background:#d9534f;
  display:none;
}

#tabBox3{
  background:#115a71;
  display:none;
}

#acMenu2 dt{
  display:block;
  width:185px;
  height:50px;
  line-height:50px;
  text-align:center;
  border:#5bc0de 1px solid;
  cursor:pointer;
  padding-right:15px;
}

#acMenu2 dd{
  background:#d9534f;
  width:200px;
  height:50px;
  line-height:50px;
  text-align:center;
  border:#5bc0de 1px solid;
  display:none;
}

#acMenu2 dt.active{}

div{
  padding-left: 20px;
  height: 500px;
}

JavaScript

$(function(){
  $("#acMenu2 dt").on("click", function() {
    $(this).next().slideToggle();
    $(this).toggleClass("active");
  });
  $("#acMenu dt").on("click", function() {
    $(this).next().slideToggle();
  });
  $("#tabMenu li a").on("click", function() {
    $("#tabBoxes div").hide();
    $($(this).attr("href")).fadeToggle();
    return false;
  });
});

3つの「toggle」メソッドを一気に実装しました。

一つ一つのソースコードが短いことが分かると思います。

ここまで、スクリプトが短く、多くのことが実現できるのはjQueryならではと言えるでしょう。ぜひ自分でもコーディングして試してみてください。

 

以上、toggleメソッドを使って表示非表示の切り替えを行いました。

Webサイトのヘッダーについていることが多いですが、toggleメソッドによってWebサイトが非常に使いやすくなるのでぜひ覚えておきましょう。

 

大石ゆかり

表示していたら非表示に、非表示の場合は表示してくれるんですねー。

田島悠介

そうそう。後、簡単なアニメーションも指定することが出来るんだよ。

大石ゆかり

アニメーション?

田島悠介

toggle(1000);などとミリ秒(1秒は1000ミリ秒)を指定すると、その時間をかけてゆっくりと表示・非表示を切り替えてくれるんだ。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。