jQueryでtoggleメソッドを使って要素の表示・非表示を切り替える方法
プログラミング初心者向けに、jQueryのtoggleメソッドを使って要素の表示・非表示を切り替える方法について解説しています。Webサイトを作成する上で必要になってくる知識なので、今すぐ理解しておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryでtoggleメソッドを使って要素の表示・非表示を切り替える方法を説明します。
例えば、Webサイトでヘルプなどのような常に表示しなくてもよいコンテンツの表示・非表示を切り替えたりすることです。
実務でも、jQueryのtoggleメソッドを利用することが多いです。
例えば、企業のホームページで製品案内などの上部メニューをクリックすると、詳しい製品の種類などがいくつか表示されるような動作が可能です。
クリックするたびに表示と非表示の操作ができることで、同じページ内にたくさんの情報をスッキリと表示させることが可能になります。
目次
【動画でも解説しています。クリックで見る！】
toggleとは
toggleメソッドはアコーディオンメニューを実現する上でとても有効になります。
押したらすらすらと降りてくるメニュー、ご存じでしょうか。
今やレスポンシブデザインが当たり前になり、見かけることも多くなったことでしょう。
toggle系のメソッドはいくつかあるので、ひとつずつ説明していきます。
田島メンター！メニューをクリックすると表示されたり、非表示になったりするものがあるんですけど、あれはjQueryで実装できないんでしょうか？
今回紹介するtoggleメソッドがいいね！
toggleメソッドは、表示してくれるメソッドですか？それとも非表示にしてくれるメソッドですか？
showメソッド(表示)、hideメソッド(非表示)っていうのがあるんだけど、toggleメソッドはその時に応じて表示・非表示を切り替えてくれるんだよ。さっそく書いてみよう！
「slideToggle」
押すと降りてくるメニューを実装できます。
アコーディオンメニューというものです。
slideToggle動作例
「fadeToggle」
タブメニューを実現できます。
タブで内容を切り替えることができます。
fadeToggle動作例
「toggleClass」
ON・OFFを切り替える動きを得意とします。
toggleClass動作例
toggleの書き方
上記の3つはどれも簡単なので、すべて実装してみましょう。
それぞれの書き方を紹介します。
「slideToggle」
$("button").click(function(){
$("p").slideToggle();
});「fadeToggle」
$("button").click(function(){
$("p").fadeToggle();
});
「toggleClass」
$("button").click(function(){ $("p").toggleClass("red"); });
このように少ない行数で、メニューバーなどのレスポンシブな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:#5bc0de;
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ならではと言えるでしょう。
JavaScriptだけでゼロから実装することを考えると非常に楽です。
ぜひ自分でもコーディングして試してみてください。
以上、toggleメソッドを使って表示・非表示の切り替えを行いました。
Webサイトのヘッダーについていることが多いですが、toggleメソッドによってWebサイトが非常に使いやすくなるのでぜひ覚えておきましょう。
表示していたら非表示に、非表示の場合は表示してくれるんですねー。
そうそう。あと、簡単なアニメーションも指定することができるんだよ。
アニメーション？
toggle(1000);などとミリ秒(1秒は1000ミリ秒)を指定すると、その時間をかけてゆっくりと表示・非表示を切り替えてくれるんだ。
執筆してくれたメンター
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 小学生がUnityでオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
