bootstrap collapseの使い方～基本概要から使用例、オプションまで解説～

✓本記事のテーマ

コラップス(collapse)とは？
Bootstrap4 Collapseの基本的な使い方
テンプレや使用例
まとめ

今回は上記のテーマで解説していきます。

細かいところについて詳しく解説していきますので、是非参考にして頂ければと思います。

〔bootstrap collapse 使い方〕コラップス(collapse)とは

コラップス(collapse)とは、アコーディオンのようにコンテンツを開閉できるJavaScriptを使用したシステムです。

〔bootstrap collapse 使い方〕Bootstrap4 Collapseの基本的な使い方

下記がボタンタグ（ボタン式）の場合の最小構成、一番シンプルな形です。

data-target=とid=は同じ文字さえ入れていれば大体作動します。
このコードでも「aaa」と適当に入れてますが作動します。

※数字のみの場合は作動しません。

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#aaa">
        ボタンの場合
    </button>
    <div class="collapse" id="aaa">
        こうして表示されます
    </div>

ボタンの場合

</button>

こうして表示されます

</div>

下記はリンクタグ（リンク式）の場合の最小構成、一番シンプルな形です。

ボタンとの主な違いは、href=　role=　が追加され、type=がなくなりました。

ボタン式と同様にhref=とid=は一致してれば大抵適当に打ち込んでも作動します。

※数字のみの場合は作動しません。

<a class="btn btn-primary" data-toggle="collapse" href="#aaa" role="button">
        リンクの場合
    </a>
    <div class="collapse" id="aaa">
        こうして表示されます
    </div>

リンクの場合

</a>

こうして表示されます

</div>

基本は理解できたでしょうか？

これから派生系のテンプレ、使用例を解説していきます。

〔bootstrap collapse 使い方〕テンプレや使用例

複数のボタンを連携させる場合

aria-expanded=”false”とaria-controls=”コンテンツのID”を追加すれば連動します。

aria-expanded=”false”はボタンの開閉の状態を他の要素に伝えるコードです。

aria-controls=”コンテンツのID”はボタン部分（リンク）とコンテンツを関連させます。

よく理解できない人もとりあえず、次のコードをコピペすれば大丈夫です。

<p>
        <a class="btn btn-primary" data-toggle="collapse" href="#qqqq" role="button"
            aria-expanded="false" aria-controls="qqqq">左</a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#wwww"
            aria-expanded="false" aria-controls="wwww">右</button>
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target=".aaaa"
            aria-expanded="false" aria-controls="qqqq wwww">全部</button>
    </p>
    <div class="row">
        <div class="col">
            <div class="collapse aaaa" id="qqqq">
                <div class="card card-body">
                    左のコンテンツだよぉ
                </div>
            </div>
        </div>
        <div class="col">
            <div class="collapse aaaa" id="wwww">
                <div class="card card-body">
                    右のコンテンツだよぉ
                </div>
            </div>
        </div>
    </div>

<p>

<a class="btn btn-primary" data-toggle="collapse" href="#qqqq" role="button"

aria-expanded="false" aria-controls="qqqq">左</a>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#wwww"

aria-expanded="false" aria-controls="wwww">右</button>

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target=".aaaa"

aria-expanded="false" aria-controls="qqqq wwww">全部</button>

</p>

左のコンテンツだよぉ

</div>

右のコンテンツだよぉ

</div>

重要なのは、先ほどの解説したとおり、

ボタン式の場合は、data-target=とid=は同じ文字さえ入れていれば大体作動する
リンク式の場合は、ボタン式と同様にhref=とid=は一致してれば大抵適当に打ち込んでも作動する

ということになります。

全てを連動させたい場合は、ボタン式の場合はdata-target=、リンク式の場合はhref=に、そしてid=の前のdiv class=”collapseの後ろと共通する文字（例ではaaa）を入れてあげると作動します。

アコーディオンの設定例

以下のコードをコピペすればＯＫです。

<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="card">
          <div class="card-header" role="tab" id="headingOne">
            <h5 class="mb-0">
              <a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
                上
              </a>
            </h5>
          </div><!-- /.card-header -->
          <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
              上のコンテンツ
            </div><!-- /.card-body -->
          </div><!-- /.collapse -->
        </div><!-- /.card -->
        <div class="card">
          <div class="card-header" role="tab" id="headingTwo">
            <h5 class="mb-0">
              <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
                中
              </a>
            </h5>
          </div><!-- /.card-header -->
          <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
              中のコンテンツ
            </div><!-- /.card-body -->
          </div><!-- /.collapse -->
        </div><!-- /.card -->
        <div class="card">
          <div class="card-header" role="tab" id="headingThree">
            <h5 class="mb-0">
              <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
               下
              </a>
            </h5>
          </div><!-- /.card-header -->
          <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
            <div class="card-body">
             下のコンテンツ
            </div><!-- /.card-body -->
          </div><!-- /.collapse -->
        </div><!-- /.card -->
      </div><!-- /#accordion -->

上

</a>

</h5>

</div>

上のコンテンツ

</div>

</div>

</div>

中

</a>

</h5>

</div>

中のコンテンツ

</div>

</div>

</div>

下

</a>

</h5>

</div>

下のコンテンツ

</div>

</div>

</div>

</div>

さらにアレンジ、手を加える方法

ここから、「あるある」のお悩み解決について解説していきます。

アコーディオンの際、カードに間隔をあけたい場合

<div class=”card mt-5″>のように<div class=”cardの後ろにマージンを設定してあげると間隔を設定できます。

<div class id="accordion" role="tablist" aria-multiselectable="true"></div>
    <div class="card"></div>
    <div class="card-header" role="tab" id="headingOne">
        <h5 class="mb-0">
            <a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button"
                aria-expanded="true" aria-controls="collapseOne">
                上
            </a>
        </h5>
    </div><!-- /.card-header -->
    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
            上のコンテンツ
        </div><!-- /.card-body -->
    </div><!-- /.collapse -->
    </div><!-- /.card -->
    <div class="card mt-5">
        <div class="card-header" role="tab" id="headingTwo">
            <h5 class="mb-0">
                <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseTwo" role="button"
                    aria-expanded="false" aria-controls="collapseTwo">
                    中
                </a>
            </h5>
        </div><!-- /.card-header -->
        <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                中のコンテンツ
            </div><!-- /.card-body -->
        </div><!-- /.collapse -->
    </div><!-- /.card -->
    <div class="card">
        <div class="card-header" role="tab" id="headingThree">
            <h5 class="mb-0">
                <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseThree"
                    role="button" aria-expanded="false" aria-controls="collapseThree">
                    下
                </a>
            </h5>
        </div><!-- /.card-header -->
        <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"
            data-parent="#accordion">
            <div class="card-body">
                下のコンテンツ
            </div><!-- /.card-body -->
        </div><!-- /.collapse -->
    </div><!-- /.card -->
    </div><!-- /#accordion -->

<a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button"

aria-expanded="true" aria-controls="collapseOne">

上

</a>

</h5>

</div>

上のコンテンツ

</div>

</div>

</div>

<a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseTwo" role="button"

aria-expanded="false" aria-controls="collapseTwo">

中

</a>

</h5>

</div>

中のコンテンツ

</div>

</div>

</div>

<a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseThree"

role="button" aria-expanded="false" aria-controls="collapseThree">

下

</a>

</h5>

</div>

<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"

data-parent="#accordion">

下のコンテンツ

</div>

</div>

</div>

</div>

アコーディオン自体の幅を変更したいとき

<h5 class=”mb-5″>のように<h5 class=の後ろにマージンを入れることで設定できます。

<div class id="accordion" role="tablist" aria-multiselectable="true"></div>
    <div class="card"></div>
    <div class="card-header" role="tab" id="headingOne">
        <h5 class="mb-5">
            <a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button"
                aria-expanded="true" aria-controls="collapseOne">
                上
            </a>
        </h5>
    </div><!-- /.card-header -->
    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
            上のコンテンツ
        </div><!-- /.card-body -->
    </div><!-- /.collapse -->
    </div><!-- /.card -->
    <div class="card">
        <div class="card-header" role="tab" id="headingTwo">
            <h5 class="mb-0">
                <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseTwo" role="button"
                    aria-expanded="false" aria-controls="collapseTwo">
                    中
                </a>
            </h5>
        </div><!-- /.card-header -->
        <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                中のコンテンツ
            </div><!-- /.card-body -->
        </div><!-- /.collapse -->
    </div><!-- /.card -->
    <div class="card">
        <div class="card-header" role="tab" id="headingThree">
            <h5 class="mb-0">
                <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseThree"
                    role="button" aria-expanded="false" aria-controls="collapseThree">
                    下
                </a>
            </h5>
        </div><!-- /.card-header -->
        <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"
            data-parent="#accordion">
            <div class="card-body">
                下のコンテンツ
            </div><!-- /.card-body -->
        </div><!-- /.collapse -->
    </div><!-- /.card -->
    </div><!-- /#accordion -->

<a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button"

aria-expanded="true" aria-controls="collapseOne">

上

</a>

</h5>

</div>

上のコンテンツ

</div>

</div>

</div>

<a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseTwo" role="button"

aria-expanded="false" aria-controls="collapseTwo">

中

</a>

</h5>

</div>

中のコンテンツ

</div>

</div>

</div>

<a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseThree"

role="button" aria-expanded="false" aria-controls="collapseThree">

下

</a>

</h5>

</div>

<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"

data-parent="#accordion">

下のコンテンツ

</div>

</div>

</div>

</div>

アコーディオンの色を変更したいとき

※わかりやすいように最初構成で説明します。※

<div class=”card-header” role=”tab” id=”headingOne” style=”background-color:#e3f2fd;”>のように“card-header”のid=の後ろにstyle=”background-color:とおくと変更することが可能です。

アコーディオンの文字を中央揃え、右揃えにしたいとき

<a class=”text-body text-center d-block p-3 m-n3″ data-toggle=”collapse” href=”#collapseOne” role=”button”

aria-expanded=”false” aria-controls=”collapseOne”>

のように、<aclass=“text-bodyの後ろにtext-centerもしくはtext-rightとおくと変更が出来ます。

  <div class="accordion" id="accordion" role="tablist" aria-multiselectable="false" >
    <div class="card">
      <div class="card-header" role="tab" id="headingOne" >
        <h5 class="mb-0">
          <a class="text-body text-center d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button"
            aria-expanded="false" aria-controls="collapseOne">
            アイテム1
          </a>
        </h5>
      </div><!-- /.card-header -->
      <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          アイテム1のコンテンツ
        </div><!-- /.card-body -->
      </div><!-- /.collapse -->
    </div><!-- /.card -->
  </div><!-- /#accordion -->

<a class="text-body text-center d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button"

aria-expanded="false" aria-controls="collapseOne">

アイテム1

</a>

</h5>

</div>

アイテム1のコンテンツ

</div>

</div>

</div>

</div>

〔bootstrap collapse 使い方〕まとめ

ここまでがbootstrap collapseの基本的な使い方になります。

要約すると、ボタンの場合はdata-target=とid=、リンクの場合はhref=とid=に同じ文字を入れれば作動します。（数字のみは不可）

全てのボタンを連動させたい場合は、aria-expanded=”false”とaria-controls=”コンテンツのID”を追加し、ボタン式の場合はdata-target=、リンク式の場合はhref=に、そしてid=の前のdiv class=”collapseの後ろと共通する文字を入れてあげると作動します。

そして、デザインのアレンジでは、マージンやパディング、バックグランドカラーなどBootstrapの他の機能を組み合わせることで好みのデザイン、配置に出来ることがわかったと思います。

それでは最後までありがとうございました。