Bootstrap4で用意されているCollapseを使えば、簡単に指定要素の開閉や、アコーディオンパネルを作ることができます。
.collapse は崩壊させる、つぶす、折りたたむなどの意味を持ちます。
Bootstrap4 Collapseの簡単な使い方を解説します。
classとデータ属性
| データ属性 | 概要 |
|---|---|
data-toggle="collapse" |
開閉ボタン（aタグやbuttonタグ）に必要 |
data-target="#demo" |
開閉ボタンのターゲットとなる要素の名前を示す |
aria-expand="..." |
開閉状態を示す値。"false"は閉じた状態。"true"は開いた状態。 |
aria-controls="..." |
開閉ボタンのターゲットとなる要素の名前を示す |
| class名 | 概要 |
|---|---|
.collapse |
コンテンツが閉じた状態 |
.collapsing |
トランジションが発生している状態 |
.collapse.show |
コンテンツが見えている状態 |
ターゲットの設定方法
aタグやbuttonタグにCollapseの設定が出来ます。
aタグに対象となるターゲットの指定。対象となる要素に任意のIDをつけると、トグルで要素が開閉します。
表示サンプル
See the Pen
Bootstrap4 Collapse Basic by 岸本賢司 (@npbrsozo)
on CodePen.
複数のターゲットのトグル
data-target="..."の箇所に開閉の対象となる要素のclass名を指定し、aria-controls="..."の箇所に開閉の対象となる要素の、2つのid名を指定すると、二つの要素を同時にトグルで開閉することが出来ます。
表示サンプル
See the Pen
Bootstrap4 Collapse Multiple targets by 岸本賢司 (@npbrsozo)
on CodePen.
アコーディオン例
属性
| 属性名 | 概要 |
|---|---|
data-toggle="collapse" |
開閉ボタンに必要 |
data-parent="#accordion" |
アコーディオンを作る時に必要、親要素のidと紐付ける |
href="#collapseOne" |
開閉するコンテンツと紐付ける |
カードのコンポーネントを使って、アコーディオンパネルを作ることが出来ます。要素の一番外側にclass="accordion"と、id="アコーディオン名"をつけてください。
表示サンプル
See the Pen
Bootstrap4 Collapse Accordion example by 岸本賢司 (@npbrsozo)
on CodePen.
