Bootstrap4移行ガイドを読む(コンポーネント編、折り畳み)
- ボタン操作によりコンテンツを開閉するコンポーネント
.collapse
でコンテンツを隠す.collapse.show
でコンテンツを表示- このコンポーネントは
href
属性を持つリンク、またはdata-target
属性を持つボタンに使用できる - コンポーネントを使うにはクラスの指定以外に
data-toggle="collapse"
が必要 - アクセシビリティへの配慮として、コントロール要素(ボタン)には
aria-expanded
属性を指定すること - 開閉するコンテンツは複数設定可能
- カードコンポーネントと組み合わせるとアコーディオンにできる
- カードコンポーネントと組み合わせるとき、ヘッダーのどこをクリックしても開閉するようにするにはカスタマイズCSSを書く