.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. .NET
  4. jQueryのtoggleの使い方を解説!アニメーションするWebページを作ろう

jQueryのtoggleの使い方を解説!アニメーションするWebページを作ろう

  • .NET
  • Javascript
  • jQuery
  • プログラミング言語
公開日時:   更新日時:
jQueryのtoggleの使い方を解説!アニメーションするWebページを作ろう
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>

    システム
    エンジニア
    メニューをクリックすると表示されたり非表示になるメソッドについて教えてください。

    プロジェクト
    マネージャー
    toggleメソッドですね。アコーディオンメニューと言います。では実際のコードを見ていきましょう。

    jQueryのtoggleとは?


    jQueryはJavaScriptで利用できる多機能なライブラリです。その中のtoggleメソッドはhtmlの部品を、ユーザの操作で表示したり消したりといった動作をさせたい時に、簡単で便利に使えます。この記事でtoggleメソッドの機能を色々と紹介します。

    この記事のサンプルを利用する場合は、htmlファイルのheadタグ内で以下のようにjQueryのライブラリを設定してください。なおjQueryは定期的にバージョンアップされるので、最新版かどうかを常にチェックしましょう。

    <script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

    toggleメソッドの簡単なサンプル

    それではシンプルな例でtoggleを使ってみましょう。htmlが以下のようになっているとします。

    タイトル

    <h2>タイトル</h2>
    <button>button</button>

    jQueryは以下のようにscriptタグ内に記述します。

    $(document).ready(function(){
        $(‘button’).click(function() {
            $(‘h2’).toggle();
        })
    });

    toggleで簡単に表示・非表示の切替ができる

    jQueryではdocumentや’button’の部分はセレクタ、ready、click、toggleはメソッドと言います。documentはページ全体を表し、readyでそれが表示された後にfunctionの処理を行います。

    その中ではbuttonがクリックされるとclickメソッドのfunctionが実行され、h2タグに対しtoggleを呼んでいます。これを実行するとh2タグのタイトルとボタンが表示され、ボタンを押すとタイトルが出たり消えたりします。

    toggleを使わずに同じことをする場合は、show()とhide()をif文で切り替えて呼ぶJavaScriptのコードを書く必要がありますが、jQueryならこんなに簡単にできるのです。

    パラメータ指定で簡単にアニメーションできる

    上のサンプルのtoggleに、1000というパラメータを追加してみましょう。

    $(‘h2’).toggle(1000);

    これで実行すると、ボタンを押すと1000ミリ秒かけてアニメーションしながらタイトルが出たり消えたりします。これをjQueryを使わずにJavaScriptで作るのは大変手間がかかりますが、jQueryのtoggleならこんなに簡単に実現できます。

    toggleの終了処理の指定もできる

    toggleメソッドはパラメータにさらにfunctionを指定することができます。functionには表示・非表示が終わった後に実行したい処理を記述できます。jQueryを以下のように書き換えてみましょう。

    $(document).ready(function(){
    $(‘button’).click(function() {
    $(‘h2’).toggle(1000, function() {
    alert(“toggle finish!”);
    });
    })
    });

    これを実行するとアニメーションが終わった後にポップアップウィンドウが表示されます。

    デフォルトのパラメータも使える

    toggleには最初から用意されたアニメーション用のパラメータがあります。例えば以下のようにするとゆっくりとアニメーションします。

    $(‘h2’).toggle(‘slow’);

    以下は速くなります。

    $(‘h2’).toggle(‘fast’);

    以下はデフォルトのアニメーション動作です。

    $(‘h2’).toggle(‘swing’);

    以下は指定されたミリ秒数で、緩急を付けずに等速でアニメーションします。

    $(‘h2’).toggle(1000, ‘linear’);

    fadeToggleについて

    jQueryにはtoggleメソッドに似たメソッドが3つあります。まず1つ目はfadeToggleです。ここまでのサンプルのtoggleをfadeToggleに置き換えましょう。

    $(‘h2’).fadeToggle();

    実行すると、文字がスッと出たり消えたりします。toggleメソッドと同じようにミリ秒や’slow’などを指定することもできます。

    $(‘h2’).fadeToggle(2000);

    $(‘h2’).fadeToggle(‘slow’);

    toggleClassについて

    次のtoggleClassは今までと少し使い方が違います。まずここまでのサンプルに、以下のCSSを追加してください。

    <style>
    .txtRed{
    color:red;
    }
    </style>

    そしてtoggleを以下のように置き換え、パラメータは追加したCSSのtxtRedを指定します。

    $(‘h2’).toggleClass(‘txtRed’);

    実行してボタンを押すと、タイトルの文字が赤くなり、もう一度押すと黒に戻ります。このようにtoggleClassはCSSの適用・非適用の切り替えが可能です。CSSと組み合わせることで色々なことができるでしょう。

    slideToggleについて

    最後にslideToggleを紹介します。今回はhtmlを以下のように変更してください。

    あいうえお
    あいうえお
    あいうえお

    <div>あいうえお<br />あいうえお<br />あいうえお</div>
    <button>button</button>

    そしてjQueryを以下のようにします。

    $(document).ready(function(){
        $(‘button’).click(function() {
            $(‘div’).slideToggle();
        })
    });

    slideToggleとtoggleの違い

    上のサンプルを実行してボタンを押すと、テキストがアニメーションして上方向に消えます。これはtoggle(‘swing’)と同じように見えます。それでは実際にtoggleにして見てみましょう。

    $(‘div’).toggle(‘swing’);

    実行してボタンを押すと、テキストが上方向に消えつつ、色が薄くなるのがわかります。slideToggleとtoggleにはそういった違いがあるということです。なおslideToggleにもミリ秒や’slow’などのパラメータを指定できます。

    アコーディオンメニューを作る

    toggleメソッドはアコーディオンメニューに多く利用されます。その簡単なサンプルを掲載しましょう。まずhtmlは以下のように記述してください。

    <ul>
    <li>
    <a class=”header”>押してください</a>
    <ul class=”menu”>
    <li>メニュー1</li>
    <li>メニュー2</li>
    <li>メニュー3</li>
    </ul>
    </li>
    <ul>

    アコーディオンメニューを手軽に実現

    そしてCSSは以下のように記述してください。これでclassがmenuになっているulタグとそれ以下のliタグが消えます。

    .menu {
    display: none;
    }

    jQueryは以下のようにします。classがheaderのaタグをクリックすると、moveが呼び出されます。move内のthisセレクタはaタグで、next()はその次のulタグを意味します。それに対してslideToggleを呼び出しています。

    $(document).ready(function(){
    $(“.header”).click(move);

    function move() {
    $(this).next().slideToggle();
    }
    });

    実行してaタグの箇所を押すと、その下のメニューが出たり消えたりします。

    システム
    エンジニア
    表示・非表示の他に表示時間を指定することもできるんですね。

    プロジェクト
    マネージャー
    このメソッドを理解すると簡単にアニメーションを作ることも可能です。

    toggleでアニメーションするWebページを作ろう

    jQueryのtoggleを紹介しましたが、ご理解頂けましたでしょうか。JavaScriptで作ると手間がかかっていたことが、jQueryのtoggleなら簡単に実現できます。

    そして、意外と簡単にアニメーションするWebページを作ることができますので、toggleを活用してWebページを作成してください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job