Bootstrap5 の 折りたたみ

この記事では、Bootstrap 5 フレームワークの 折りたたみ (Collapse) コンポーネントの使い方を紹介します。折りたたみ可能なコンテンツの作成、折りたたみ状態の制御、関連するオプションやイベントについて説明します。

1. 折りたたみコンテンツの作成

折りたたみ可能なコンテンツを作成するには、以下の手順に従います。

1. 折りたたみたいコンテンツを <div> 要素で囲みます。
2. 囲んだ要素に .collapse クラスを追加します。
3. 囲んだ要素に一意の ID を追加します。
4. <button> 要素または <a> 要素を、折りたたみをトリガーするボタンまたはリンクとして使用し、data-bs-toggle="collapse" 属性と data-bs-target="#折りたたみコンテンツID" 属性を設定します。

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  ボタン
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    折りたたみ可能なコンテンツ
  </div>
</div>

2. 折りたたみ状態の制御

折りたたみ状態は、以下の方法で制御できます。

• デフォルトで展開: 折りたたみ要素に .show クラスを追加します。
• JavaScript で制御: JavaScript を使用して折りたたみインスタンスを取得し、show() メソッドまたは hide() メソッドを呼び出します。

<div class="collapse show" id="collapseExample">
  ...
</div>

const collapseElement = document.getElementById('collapseExample');
const collapse = new bootstrap.Collapse(collapseElement);

collapse.show(); // 展開
collapse.hide(); // 折りたたみ

3. 折りたたみオプション

折りたたみコンポーネントには、いくつかのオプションがあります。

const collapse = new bootstrap.Collapse('#collapseExample', {
  parent: '#accordion',
  toggle: false
});

4. 折りたたみイベント

折りたたみコンポーネントは、以下のイベントを発生させます。

const collapseElement = document.getElementById('collapseExample');

collapseElement.addEventListener('shown.bs.collapse', () => {
  console.log('折りたたみコンテンツが展開されました');
});

関連情報

• Bootstrap 5 の公式ドキュメント: Collapse

Q&A

Q: 複数の折りたたみ要素を同時に開くことはできますか？

A: はい、デフォルトでは複数の折りたたみ要素を同時に開くことができます。ただし、アコーディオンのように一度に1つの要素だけを開きたい場合は、parent オプションを使用します。

Q: 折りたたみ要素の高さをアニメーション化できますか？

A: はい、Bootstrap 5 の折りたたみコンポーネントは、CSS トランジションを使用して高さをアニメーション化します。

Q: 折りたたみ要素内で JavaScript を使用できますか？

A: はい、折りたたみ要素内で JavaScript を使用できます。ただし、折りたたみ要素のコンテンツが動的に変更される場合は、shown.bs.collapse イベントまたは hidden.bs.collapse イベントを使用して、JavaScript コードを初期化または更新する必要がある場合があります。