JavaScript

【toggle】jQueryで表示非表示の切り替え方法を解説

Webサイトをみていると、クリックを押すと表示と非表示を切り替えるUIを見たことがあると思います。Q&Aで自分の知りたい項目だけをクリックすると、文章が表示されるみたいな機能です。コーポレートサイトでよく見る機能ですが、プログラムが複雑そうと感じていませんか?

jQueryを使えば、とてもシンプルなコードで実装することができます。そのために使われるメソッドがtoggleです。本記事では、jQueryを使って表示非表示の切り替えの機能を実装する方法を解説します。

jQueryで表示非表示を切り替える方法

toggleメソッドを使う

toggleは表示非表示を切り替えるメソッドにです。Q&Aなどでよく見るクリックするとテキストが出てきて、もう一度クリックするとテキストが消えるという動作はtoggleを使用しています。show()とhide()を1つにまとめて行うイメージです。

トグルとはスイッチなどで操作する度に2つの機能が入れ替わる機能のことです。電気部品でON/OFFを切り替えるのに使うスイッチをトグルスイッチと言います。jQueryもクリックなどの操作によって表示非表示という機能を入れ替えています。

toggleの種類

toggleには類似したメソッドがあります。表示非表示の切り替えは変わりませんが、表示のされ方や動きが違います。自分の実装したい機能に合わせて選んでください。

  • fadeToggle():フェードイン・フェードアウトの動きで表示非表示を繰り返す
  • slideToggle():下にスライドして表示される
  • toggleClass():指定したタグにclassを追加、削除をする

toggleの書き方

基本的な書き方

toggleのコードの書き方を解説します。構文は下の通りです。

$(“セレクタ”).toggle(引数);

セレクタには表示非表示をさせたいものを選択します。しかし、toggleのコード単独では表示が非表示、非表示が表示になるだけで切り替えができません。切り替えをするにはイベントを設定する必要があります

よく使われるのクリックイベントで、コードを書くと以下の通りになります。

$(“button”).on(“click”,function(){
	$(“ul”).toggle();
});

ボタンを押すことで、リストが表示非表示を切り替えるコードです。シンプルなコードで表示非表示の切り替えができることがわかっていただけたでしょうか。

引数を利用する

引数を利用すれば、表示の速度をコントロールすることができます。引数のところに数字を入れると切り替わるまでの時間を指定することができます。

$(“button”).on(“click”,function(){
	$(“ul”).toggle(1000);
});

上のコードのように引数を1000とすると1秒で表示非表示が切り替わります。引数はミリ秒(1/1000秒)なので、数値を入力する際は気を付けてください。

また、引数の中にアニメーションを設定することもできます。種類を下にまとめました。

  • toggle(“slow”):ゆっくり表示非表示をする
  • toggle(“fast”):早く表示非表示をする
  • toggle(1000,”liner”):一定速度で表示非表示をする

jQueryのコードでtoggleを実装してみる

アコーディオンメニュー

アコーディオンメニューとはクリックすると下にメニューが表示される機能のことです。コーポレートサイトでもよく見ます。slideToggleを使って、Webページで使われる動きにしました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>アコーディオンメニュー</title>
  <style>
    li{
      list-style: none;
    }
    .menu{
      border:red 1px solid;
      width:200px;
      text-align: center;
    }
    .menu-list{
      display:none;
      width:200px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="menu">メニュー</div>
  <div class="menu-list">
    <ul>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
      <li>メニュー4</li>
    </ul>
  </div>
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<script>
  $(".menu").on("click",function(){
    $(".menu-list").slideToggle();
  });
</script>
</body>
</html>

まとめ

jQueryでtoggleを用いて表示非表示を切り替える方法を解説しました。Webページにはよく使われるので、使いこなせるようにしておきたいメソッドの1つです。特にコーポレートサイトのメニューであったり、Q&Aの部分に使われます。

表示非表示の切り替えはUI設計には欠かせなくなってきているので、Web制作の依頼を受たければ使い方のバリエーションも考えていくことをおすすめします。