kikeda1104's blog

備忘録・技術に関することを書いています。(webエンジニア)

アコーディオンリスト(jQuery)

アコーディオンリストの作成

最近、アコーディオンリストの作成の依頼が上げられてきているので記録のために書いておく。

アコーディオン

jQueryを利用します。

$("#my_id").slideToggle('speed', 'callback'); - speed: デフォルトでは、normal、指定できるオプションは、slow, fast - また、数値で指定することができ、単位は、ミリ秒になる

  • callback: スライドが終了した後に実行されるコールバック関数

戻り値 - jQueryオブジェクト

スライドが終了した後に、画像の差し替えの処理したかったので下記の記述にしています。

サンプルコード

JS

$("img").on("click", function() {
  $("#" + id).slideToggle('normal', function() {
    if ($("#" + id).css("display") == 'block') {
      $('[data-id=" + id + "]').attr('src','../../img/mobile/toggle-up.png');
    } else {
      $('[data-id=" + id + "]').attr('src','../../img/mobile/toggle-open.png');
    }
  });
});

html

<div class="step-contents">
  <div class="step-content">
  </div>

  <div class="show-btn">
    <img alt="詳細情報の追加ボタン" src="../../img/mobile/toggle-open.png" />      
  </div>
</div>