Bootstrap

Bootstrapでコラプス（Collapse）を作る方法

2022年7月9日 by single コメントはまだありません

Bootstrapでコラプス（Collapse）を作る方法

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Collapse demo</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row">
      <div><h4>サンプル１（１エリア）</h4></div>
        <p>
          <a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            リンクの場合（hrefでターゲットを設定）
          </a>
          <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            ボタンの場合（h data-bs-targetでターゲットを設定）
          </button>
        </p>
        <div class="collapse" id="collapseExample" >
          <div style="height:600px">
            <strong>表示エリア</strong><br />
              HTMLタグも利用可能です。
          </div>
        </div>
    </div><!-- row -->
    <br />
    <div class="row">
      <div><h4>サンプル２（複数エリア）</h4></div>
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">
            左領域表示／非表示
          </a>
          <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">
            右領域表示／非表示
          </button>
          <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">
            両領域表示／非表示
          </button>
       </p>
       <div class="row">
         <div class="col">
           <div class="collapse multi-collapse" id="multiCollapseExample1">
             <div class="card card-body" id="card1">
               左側の領域
             </div>
           </div>
         </div>
         <div class="col">
           <div class="collapse multi-collapse" id="multiCollapseExample2">
             <div class="card card-body">
               右側の領域
             </div>
           </div>
         </div>
       </div><!-- row -->
    </div><!-- row -->
    <br />
    <div class="row" >
      <div><h4>サンプル３（オプション）</h4></div>
      <p>
        <input type="button" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExampleOption" aria-expanded="false" aria-controls="collapseExampleOption" value="ボタン[input]" />
      </p>
      <div class="collapse show" id="collapseExampleOption" 
        <div class="card card-body">
          初期表示で表示済み
        </div>
      </div>
    </div><!-- row -->
  </div><!-- container -->
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script tyle="text/javascript">
    var myCollapse = document.getElementById('collapseExampleOption');
    var bsCollapse = new bootstrap.Collapse(myCollapse, {
      toggle: false /* 初期Toggleを無効化 */
    });
  </script>
</body>
</html>

実装方法

Bootstrap導入

まず、BootstrapのCSSファイルとJSファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

導入方法の詳細は、以下のページをご覧ください。

コラプス実装

コラプス領域オブジェクト生成
<div class="collapse" id="collapseExample">
  ...
</div>

まず、コラプス領域を生成します。

DIV領域にclassに「collapse」を指定してください。

そして、必ず、idも設定してください。

この領域が表示／非表示となる領域となります。

トリガーオブジェクト生成

この生成したコラプス領域を表示／非表示させるトリガーとなるオブジェクトを生成します。

リンクの場合
<a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
  リンク
</a>

アンカー(a)オブジェクトにhref属性を設定し、リンク先にコラプスオブジェクトのidをシャープ（#）記号付きで指定してください。

リンク以外（ボタンなど）の場合
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  ボタン
</button>

アンカー(a)以外は、属性「data-bs-target」を設定し、値にコラプスオブジェクトのidをシャープ（#）記号付きで設定してください。

初期表示でコラプス領域を表示させる方法

<div class="collapse show" id="collapseExample" 
  ...
</div>

コラプス領域オブジェクトのclassに「show」クラスを設定してください。

そうすると初期表示時、表示状態で表示されます。

オプション指定

<div class="collapse" id="collapseExampleOption">
  ...
</div>

まず、コラプス領域を生成します。

  <script tyle="text/javascript">
    var myCollapse = document.getElementById('collapseExampleOption');
    var bsCollapse = new bootstrap.Collapse(myCollapse, {
      toggle: false /* 初期Toggleを無効化 */
    });
  </script>

次に、Javascriptでコラプス領域をDOMオブジェクトを取得し、Collapseを初期化します。その際、オプションを指定することができます。

ご参考

関連ページ