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ミリ秒)を指定すると、その時間をかけてゆっくりと表示・非表示を切り替えてくれるんだ。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
執筆してくれたメンター
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 小学生がUnityでオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 |
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
