概要

Bootstrap の Collapse を用いてコンテンツの折り畳みを実現した。その際に追加で処理を追加したいときのメモ。

コード

今回は折り畳み部を開く時に★を時計回りに360 度回転、閉じる時に反時計回りに360度回転させたいとする。

HTML

<!-- a -->
<div id="test" class="mb-2">
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false"
    aria-controls="collapseExample1">
    <div class="d-flex">
      <div>test1</div>
      <div id="mark">★</div>
    </div>
  </a>
  <div class="collapse" id="collapseExample1">
    <div class="card card-body">
      test1 content
    </div>
  </div>
</div>
<!-- b -->
<div id="test">
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false"
    aria-controls="collapseExample2">
    <div class="d-flex">
      <div>test2</div>
      <div id="mark">★</div>
    </div>
  </a>
  <div class="collapse" id="collapseExample2">
    <div class="card card-body">
      test2 content
    </div>
  </div>
</div>

...

<script type="text/javascript" src="/static/js/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap/bootstrap.bundle.min.js"></script>

※ jQuery と Bootstrap のスクリプトを読み込んでいることを前提としています。

jQuery

$('div#test').each(function(_,element){
    var collapse = $(element).find('.collapse')[0];
    var mark = $(element).find('div#mark');
    // 開く時
    $(collapse).on('show.bs.collapse', function(){
        mark.css({'transform': 'rotate(360deg)', 'transition': '2s'})
    });
    // 閉じる時
    $(collapse).on('hide.bs.collapse', function(){
        mark.css({'transform': 'rotate(0deg)', 'transition': '2s'})
    });
})

each を使い該当の div をすべて取得するため、HTML の a - b 部を繰り返し使用できる。
そのため、個数に関係なく JS が定義できいるので a -b 部をテンプレート化できるので HTML を組む上で効率が良い。

※ イベントの種類
Collapse | Events より引用

Event Type	Description
show.bs.collapse	show インスタンスのメソッドが呼ばれたときに発生します
shown.bs.collapse	Collapse 要素がユーザに見えるようになったときに発生します（CSSによる遷移が完了するのを待機します）
hide.bs.collapse	hide メソッドが呼ばれたときにすぐに発生します
hidden.bs.collapse	Collapse 要素がユーザから見えなくなったときに発生します

サンプル

test1 content

test2 content

参考

Collapse - Bootstrap 4.5