【jQuery】隠した要素を表示させるボタンの作り方

2020-04-08

今回はjQueryを使用して「隠した要素を表示させるボタン」の作り方を記載していきます。

「隠した要素になりきる女の子」

使用されるケース

「FAQ」で見ることが多く、初期状態で質問部分は表示され、ボタン（質問部分）を押すことで回答部分が表示され、再度ボタンを押すことで回答部分が非表示に戻ります。

利用者全員には目を通してもらう必要の無い内容をあらかじめ隠すことで、余計な情報を与えず見てほしい情報だけ見せるという意図で使われます。

サンプル

リンク

コードの記述について

上記のサンプルでは、単純なボタンによる表示切替以外にも
・ボタンと表示対象が複数存在する
・非表示部分が表示された後、ボタンの「▼」が「▲」に変わる
・アニメーション中のボタンクリックを無効化
という内容が含まれています。

合わせて順を追って説明していきます。

ボタンを押すと要素の表示が切り替わる

HTMLは下記のように記述して、dt部分を押すとdt部分が表示されるようにします。
※dl,dt,ddタグを使用していますが、pやdivでも同様です。

  <dl>
      <dt>ボタン部分</dt>
      <dd>表示したい部分</dd>   
  </dl>

dd部分は、初期状態では非表示になるようにCSSで設定します。

dd {
      display: none;
    }

「jQuery」を使用して実装を行いますので、「body」の最後に下記の通りjQueryの読み込み用コードを追記します。
※ダウンロードしたものを使用してもOKです 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

そして、jQueryの読み込みコードの下に書くコードはこちらです。 

 <script>
    $(function() {
      $('dt').click(function() {
        $('dd').slideToggle();　　　　
      });
    });

  </script>

$('dt’).click(function() {~
の記述で、「dt」をクリックしたときに以下の処理を実行できます。

$('dd’).slideToggle();　
については、「dd」が表示されていなかったときに表示され、表示されていたときに非表示となる処理となります。

こちらで基本的な記述は完成なので、これからグレードアップさせていきましょう。

アニメーション中のボタンクリック無効化

上記のままでは、ddの表示切替途中にdtを押した場合も処理を受け付けて連続して開閉を行ってしまいます。

利用者が誤って複数回クリックした場合も考慮し、表示切替途中は処理を受け付けないように記述しましょう。

ddの部分に「:not(:animated)」を付け加えることで、ddがアニメーションしていない場合という条件が加えられます。

 <script>
    $(function() {
      $('dt').click(function() {
        $('dd:not(:animated)').slideToggle();　　　　
      });
    });

  </script>

こちらでOKです。

ボタンと表示対象が複数存在する場合の記述

ボタンと表示したい部分が複数ある場合について考慮していきます。

HTML部分についてdtとddを増やして下記のようにしたとします。

  <dl>
      <dt>ボタン部分</dt>
      <dd>表示したい部分</dd> 
      <dt>ボタン部分</dt>
      <dd>表示したい部分</dd>
      <dt>ボタン部分</dt>
      <dd>表示したい部分</dd>  
  </dl>

この状態で、先ほど記述した下記のコードの動きを見てみたとします。

 <script>
    $(function() {
      $('dt').click(function() {
        $('dd:not(:animated)').slideToggle();　　　　
      });
    });

  </script>

どれかのdtを押した際に、全てのddが表示されたはずです。

記述を変更し、押したdtに対応したddのみを表示する内容にする必要があります。

それが下記コードとなります。

   $(function() {
      $('dt').click(function() {
        $(this).next('dd:not(:animated)').slideToggle();
      });
    });

$(this).next('dd:not(:animated)’).slideToggle();
の記述に変更することにより、this（→クリックしたdt）の直後のddのみの表示を切り替えるという内容にすることができます。

非表示部分が表示された後、ボタンの「▼」が「▲」に変わる記述について

ボタンがボタンであること（クリック可能であること）かつ、クリックした際に下部に何かが展開されることを利用者に直感的に認識させるために「▼」のような記述は必須です。

サンプルではdtの疑似要素として下記の通り設定しています。

dt {
      position: relative;
    }

dt::after {
      content: "▼";
      position: absolute;
      right: 20px;
    }

上記dtが表示された際にdtに追加するクラスのCSSを追加しています。

.question::after {
      content: "▲"
    }

そして最終的なjQueryのコードは下記となります。

 $(function() {
      $('dt').click(function() {
        $(this).next('dd:not(:animated)').slideToggle(function() {
          $(this).prev('dt').toggleClass('question');
        });
      });
    });

$(this).prev('dt’).toggleClass('question’);
の部分について、まずこの記述は
$(this).next('dd:not(:animated)’).slideToggle();
のコールバック関数として記載されています。

コールバック関数として記載することで、ddが表示処理をしている間には切り替わらないようにすることができます。

表示処理終了前に「▲」に切り替わっているサイトをよく見かけますが、表示処理が行われて初めてボタンを押すことができるようになるので、この記述のほうが記号の意味に則っていると考えます。

$(this).prev('dt’)
について、コールバック関数内において「this」は
$(this).next('dd:not(:animated)’)
となりますが、dtにクラスを付与したいので、この直前のdtを指定するために
$(this).prev('dt’)
をセレクタに指定しています。

そして「question」のクラス付与および削除を行うために
.toggleClass('question’)
の命令を記載しています。

長くなりましたが、以上で説明は終わりとなります。

Web制作,jQuery