Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Collapse (コラプス)

いくつかのクラスと JavaScript プラグインを使用して、プロジェクト全体のコンテンツの表示を切り替えます。

目次

How it works

collapse JavaScript プラグインは、コンテンツの表示と非表示に使用されます。ボタンやアンカーは、トグルする特定の要素にマッピングされたトリガーとして使われます。要素を折りたたむと height が現在の値から 0 にアニメーションします。CSSがアニメーションをどのように扱うかを考えると、.collapse 要素に padding を使うことはできません。代わりに、このクラスを独立したラッピング要素として使用します。

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Example

下のボタンをクリックすると、クラス変更による別の要素の表示・非表示を切り替えることができます。

href属性を持つリンク、または data-target属性を持つボタンを使用できます。 どちらの場合も、 data-toggle =" collapse "が必要です。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Multiple targets

<button>または <a> は、href属性 または data-target属性のセレクターで参照することにより、複数の要素を表示および非表示にすることができます。 複数の<button>または <a> は、それぞれがhrefまたはdata-target属性で要素を参照する場合、要素を表示および非表示にすることができます

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Accordion example

Using the card コンポーネントを使用すると、デフォルトの折りたたみ動作を拡張してアコーディオンを作成できます。 アコーディオンスタイルを適切に実現するには、ラッパーとして必ず .accordion を使用してください。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Accessibility

必ずコントロール要素にaria-expandedを追加してください。 この属性は、コントロールに関連付けられた折りたたみ可能な要素の現在の状態をスクリーンリーダーや同様の支援技術に明示的に伝えます。 collapsible要素がデフォルトで閉じている場合、コントロール要素の属性の値はaria-expanded = "false"である必要があります。 折りたたみ可能な要素を、デフォルトで表示クラスを使用して開くように設定している場合は、代わりにコントロールでaria-expanded = "true"を設定します。 プラグインは、折りたたみ可能な要素が開いているか閉じているか(JavaScriptを介して、またはユーザーが同じ折りたたみ可能な要素に関連付けられている別のコントロール要素をトリガーしたため)に基づいて、コントロールのこの属性を自動的に切り替えます。 コントロール要素のHTML要素がボタンではない場合(<a><div>など)、属性role = "button"を要素に追加する必要があります。

control要素が単一の折りたたみ可能な要素をターゲットにしている場合、つまり data-target 属性が id セレクタを指している場合、折りたたみ可能な要素の id を含む aria-controls 属性を control要素に追加しなければなりません。最近のスクリーンリーダや同様の支援技術では、この属性を利用して、折りたたみ可能な要素自体に直接移動するための追加のショートカットをユーザーに提供しています。

Bootstrapの現在の実装は、WAI-ARIA Authoring Practices 1.1 accordion patternで説明されている様々なキーボードインタラクションをカバーしていないことに注意してください - カスタムJavaScriptでこれらを自分で含める必要があります。

Usage

collapse プラグインは、いくつかのクラスを利用して重い作業を処理します。

These classes can be found in _transitions.scss.

Via data attributes

要素に data-toggle="collapse"data-target を追加するだけで、1つ以上の折りたたみ可能な要素の制御を自動的に割り当てることができます。data-target 属性には、折り畳みを適用する CSS セレクタを指定します。折りたたみ可能な要素には必ずクラス collapse を追加してください。デフォルトで開いた状態にしたい場合は、クラス show を追加します。

折りたたみ可能な領域にアコーディオンのようなグループ管理を追加するには、データ属性 data-parent="#selector" を追加します。デモを参照してください。

Via JavaScript

手動で有効にする場合

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Options

オプションは、データ属性またはJavaScriptで渡すことができます。データ属性の場合は、data-parent=""のように data- にオプション名を追加します。

Name Type Default Description
parent selector | jQuery object | DOM element false parentが指定された場合、この折りたたみ可能な項目が表示されたときに、指定された親の下にあるすべての折りたたみ可能な要素が閉じられます。(従来のアコーディオンの動作に似ています - これは card クラスに依存します)。 属性は、対象の折りたたみ可能な領域に設定する必要があります。
toggle boolean true 呼び出し時に折りたたみ可能な要素をトグルします。

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

折りたたみ可能な要素としてコンテンツをアクティブにします。オプションの object を受け取ります。

コンストラクタを使用して、例えばcollapseのインスタンスを作成することができます。

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Method Description
toggle 折りたたみ可能な要素の表示・非表示を切り替えます。折りたたみ可能な要素が実際に表示または非表示になる前に呼び出し元に戻ります。 (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).
show 折りたたみ可能な要素を表示します。 折りたたみ可能な要素が実際に表示される前に呼び出し元に戻ります。 (e.g., before the shown.bs.collapse event occurs).
hide 折りたたみ可能な要素を非表示にします。 折りたたみ可能な要素が実際に隠される前に呼び出し元に戻ります。 (e.g., before the hidden.bs.collapse event occurs).
dispose 要素の崩壊を破壊する。
getInstance DOM 要素に関連付けられた collapse インスタンスを取得する静的メソッドです。

Events

Bootstrapのcollapseクラスは、collapse機能にフックするためのいくつかのイベントがあります。

Event type Description
show.bs.collapse このイベントは、showインスタンスメソッドが呼び出されたときにすぐに発生します。
shown.bs.collapse このイベントは、collapse 要素がユーザーに見えるようになったときに発生します(CSS トランジションが完了するのを待ちます)。
hide.bs.collapse このイベントは、hideメソッドが呼ばれたときにすぐに発生します。
hidden.bs.collapse このイベントは、collapse 要素がユーザーから隠されたときに発生します(CSS トランジションが完了するのを待ちます)。
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})