Bootstrap4 Collapseでアコーディオン(使い方&サンプル)

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.

まとめ

この記事が気に入ったら
いいね ! しよう