とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. コラプス

折りたたみ

.collapse は崩壊させる、つぶす、折りたたむなどの意味を持ちます。折りたたまれた状態で表示され、data-toggle="collapse" を指定した <a> や <button> によって開閉を切り替えます。ターゲット要素は href="#..." や data-target="#..." で指定します。aria-*="..." は読み上げブラウザなどに付加情報を与えるもので、aria-expand="..." は開閉状態、aria-controls="..." は対象を示します。トランスレーション中の要素には .collapsing が設定されます。

<button class="btn btn-primary"
    data-toggle="collapse"
    data-target="#example-1"
    aria-expand="false"
    aria-controls="example-1">Button</button>
<div class="collapse" id="example-1">
  <div class="card card-body">
    Hypertext Markup Language (HTML) is ...
  </div>
</div>

<a> を用いる場合は data-target="#..." の代わりに href="#..." を使用します。また、ボタンであることを示す role="button" を追加しています。

<a class="btn btn-primary"
    data-toggle="collapse"
    href="#example-2"
    role="button"
    aria-expand="false"
    aria-controls="example-2">HTML</a>
<div class="collapse" id="example-2">
  <div class="card card-body">
    Hypertext Markup Language (HTML) is ...
  </div>
</div>

マルチターゲット

data-target="..." にクラス名を指定すると、複数のターゲットを開閉することができます。

<button class="btn btn-primary" type="button"
    data-toggle="collapse"
    data-target=".example-3"
    aria-expanded="false"
    aria-controls="example-3a example-3b">
  Multi target
</button>
<div class="row">
  <div class="col">
    <div class="collapse example-3" id="example-3a">
      <div class="card card-body">
        Target-A
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse example-3" id="example-3b">
      <div class="card card-body">
        Target-B
      </div>
    </div>
  </div>
</div>

アコーディオン

.accordion を用いて、アコーディオン式のカードを表示します。

<div class="accordion" id="accordion-4">
  <div class="card">
    <div class="card-header" id="header-4a">
      <button class="btn btn-link" type="button"
          data-toggle="collapse" data-target="#card-4a"
          aria-expanded="true" aria-controls="card-4a">
        Header A
      </button>
    </div>
    <div id="card-4a" class="collapse"
        aria-labelledby="header-4a" data-parent="#accordion-4">
      <div class="card-body">
        Card A
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="header-4b">
      <button class="btn btn-link" type="button"
          data-toggle="collapse" data-target="#card-4b"
          aria-expanded="false" aria-controls="card-4b">
        Header B
      </button>
    </div>
    <div id="card-4b" class="collapse"
        aria-labelledby="header-4b" data-parent="#accordion-4">
      <div class="card-body">
        Card B
      </div>
    </div>
  </div>
</div>

JavaScriptによる制御

JavaScript の collapse() で表示・非表示を制御することもできます。'show' は表示、'hide' は非表示、'toggle' はトグルを意味します。'dispose' は「要素の collapse を破壊する」とありますが、よくわかりません。

<button onclick="$('#example-5').collapse('show')">Show</button>
<button onclick="$('#example-5').collapse('hide')">Hide</button>
<button onclick="$('#example-5').collapse('toggle')">Toggle</button>
<button onclick="$('#example-5').collapse('dispose')">Dispose</button>
<div class="collapse" id="example-5">
  <div class="card card-body">
    Hypertext Markup Language (HTML) is ...
  </div>
</div>