JavaScript / TypeScript / jQuery

【Bootstrap/jQuery】Collapseで表示とボタン文言を切り替える

めだまやき

bootstrapのcollapseを使用した表示切り替え方法の基本と、
ボタンやリンクのテキストも変更する方法のメモ

Collapseとは

Bootstrapで用意されている、コンテンツのアコーディオン (折り畳み)
つまり表示/非表示ができる仕組み

使用するために、Bootstrapの各ファイルを読み込んでおく

<!-- bootstrapのcss,jsを読み込む -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Collapseの使い方

トリガーとなるのはボタンやリンクなどのアンカー
( 詳しくは公式サイト参照 )

下記手順で簡単にコンテンツの表示/非表示が実装できる

  • 表示/非表示したいコンテンツ要素のクラス名にcollapse、
    IDに任意の文字列 (collapseExample)を付与する
  • トリガーとなるボタンやリンクにdata-toggle="collapse"や
    表示/非表示したいコンテンツのIDなどを記載する

こんな感じ ↓

<!-- bootstrapのcss,jsを読み込む -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- トリガーとなるリンク&ボタン -->
<a 
  data-toggle="collapse"
  href="#collapseExample"
  role="button"
  aria-expanded="false"
  aria-controls="collapseExample"
>
  リンクで開閉させる
</a>
<button
  type="button"
  data-toggle="collapse"
  data-target="#collapseExample"
  aria-expanded="false"
  aria-controls="collapseExample"
>
  ボタンで開閉させる
</button>
<!-- /トリガーとなるリンク&ボタン -->

<!-- 対象のコンテンツ -->
<div class="collapse" id="collapseExample">
  開閉させるコンテンツ
</div>
<!-- /対象のコンテンツ -->

リンクとボタンは書き方が少し異なる
  • リンクの場合
<a data-toggle="collapse"
   href="#collapseExample"
   role="button"
   aria-expanded="false"
   aria-controls="collapseExample">

・hrefに、表示/非表示にしたい要素のIDを指定する
・role="button"を付与する

  • ボタンの場合
<button data-toggle="collapse"
        data-target="#collapseExample"
        type="button"
        aria-expanded="false"
        aria-controls="collapseExample">

・data-targetに、表示/非表示にしたい要素のIDを指定する

各属性の解説
  • data-toggle
    リンクでもボタンでも、トリガーとしたい要素には必須の属性
  • aria-expanded
    スクリーンリーダーに開閉状態を伝えるためのもの。
    falseにしていると、デフォルトは閉じている (非表示) 状態
    trueにすると、デフォルトは開いている (表示) 状態
    何も指定しない場合の初期値はtrue
  • aria-controls
    スクリーンリーダーに開閉対象を伝えるためのもの。
  • role
    ボタン(<button>)でない要素には全てrole="button"を付与する必要がある
  • href
    リンクの場合、ここで開閉対象を指定する
  • data-target
    ボタンの場合、ここで開閉対象を指定する

初期表示は「非表示」のCollapseデモ

  • サンプルソース
<!-- bootstrapのcss,jsを読み込む (省略) -->

<!-- トリガーとなるリンク&ボタン -->
<a
  data-toggle="collapse"
  href="#collapseExample1"
  role="button"
  aria-expanded="false"
  aria-controls="collapseExample1"
>
  リンクで開閉させる
</a>
<button
  type="button"
  data-toggle="collapse"
  data-target="#collapseExample1"
  aria-expanded="false"
  aria-controls="collapseExample1"
>
  ボタンで開閉させる
</button>
<!-- /トリガーとなるリンク&ボタン -->

<!-- 対象のコンテンツ -->
<div class="collapse" id="collapseExample1">
  開閉させるコンテンツ
</div>
<!-- /対象のコンテンツ -->

  • サンプルソースDEMO
開閉させるコンテンツ

初期表示は「表示」のCollapseデモ

  • サンプルソース
<!-- bootstrapのcss,jsを読み込む (省略) -->

<!-- トリガーとなるリンク -->
<a
  data-toggle="collapse"
  href="#collapseExample2"
  role="button"
  aria-controls="collapseExample2"
>
  リンクで開閉させる
</a>
<button
  type="button"
  data-toggle="collapse"
  data-target="#collapseExample2"
  aria-controls="collapseExample2"
>
  ボタンで開閉させる
</button>
<!-- /トリガーとなるリンク -->

<!-- 対象のコンテンツ -->
<div class="collapse show" id="collapseExample2">
  開閉させるコンテンツ
</div>
<!-- /対象のコンテンツ -->

  • サンプルソースDEMO
リンクで開閉させる
開閉させるコンテンツ

解説
  • aria-expanded="false"を取り除くことで、初期値のaria-expanded="true"になるのでスクリーンリーダーに「開」状態であることを伝える
  • コンテンツのclassにshowを追加することで初期から表示状態にする

表示/非表示切り替え時にボタン・リンクの文言も変えるCollapseデモ

Collapseには、イベントが設定されているので、それを利用する
詳細: https://getbootstrap.jp/docs/4.2/components/collapse/#events

  • サンプルソース
<!-- bootstrapのcss,jsを読み込む (省略) -->

<!-- トリガーとなるリンク -->
<a
  class="detail-trigger"
  data-toggle="collapse"
  href="#collapseDetail"
  role="button"
  aria-expanded="false"
  aria-controls="collapseDetail"
>
  詳細を表示する
</a>
<button
  class="detail-trigger"
  type="button"
  data-toggle="collapse"
  data-target="#collapseDetail"
  aria-controls="collapseDetail"
>
  詳細を表示する
</button>
<!-- /トリガーとなるリンク -->

<!-- 対象のコンテンツ -->
<div class="collapse" id="collapseDetail">
  詳細内容詳細内容詳細内容
</div>
<!-- /対象のコンテンツ -->

<!-- 開閉時に文言を変える処理 -->
<script>
    $(function() {
        // 表示時
        $('#collapseDetail').on('show.bs.collapse', function () {
            $('.detail-trigger').text('詳細を閉じる');
        });
        // 非表示時
        $('#collapseDetail').on('hide.bs.collapse', function () {
            $('.detail-trigger').text('詳細を表示する');
        });
    });
</script>
<!-- /開閉時に文言を変える処理 -->

  • サンプルソースDEMO
詳細内容詳細内容詳細内容

Collapseの動作が「がたつく」場合

このように、開閉動作がガタガタする場合・・・

開閉させるコンテンツ

  • ガタつくソース
<!-- bootstrapのcss,jsを読み込む (省略) -->

<!-- トリガーとなるリンク -->
<a
  data-toggle="collapse"
  href="#collapseGataGata"
  role="button"
  aria-expanded="false"
  aria-controls="cocollapseGataGata"
>
  ガタガタするよ
</a>
<!-- /トリガーとなるリンク -->

<!-- 対象のコンテンツ -->
<div class="collapse p-4 m-4" id="collapseGataGata">
  開閉させるコンテンツ
</div>
<!-- /対象のコンテンツ -->

原因 & 解決策

collapse要素にpaddingやmarginなど余白を指定しているのが原因

collapse要素に余白指定をせずに、その中の要素に指定してあげると解決

  • ガタつかないソース
<!-- bootstrapのcss,jsを読み込む (省略) -->

<!-- トリガーとなるリンク -->
<a
  data-toggle="collapse"
  href="#collapseNotGataGata"
  role="button"
  aria-expanded="false"
  aria-controls="collapseNotGataGata"
>
  ガタガタしなくなったよ
</a>
<!-- /トリガーとなるリンク -->

<!-- 対象のコンテンツ -->
<div class="collapse" id="collapseNotGataGata">
  <div class="p-4 m-4">
    開閉させるコンテンツ
  </div>
</div>
<!-- /対象のコンテンツ -->
開閉させるコンテンツ

\ 案件のご依頼・ご相談はこちらから /