Bootstrap4 折叠

この記事では、Bootstrap4 フレームワークの折りたたみ（Collapse）コンポーネントの使用方法について説明します。折りたたみ可能なコンテンツエリアの作成方法、折りたたみ状態の制御方法、およびいくつかの一般的な構成オプションについて説明します。

一、折りたたみ可能なコンテンツを作成する

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

1. 基本構造

折りたたみたいコンテンツを <div class="collapse"> で囲み、data-toggle="collapse" と data-target="#ターゲット要素ID" 属性を使用して、折りたたみボタンとターゲット要素を関連付けます。

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

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

2. 折りたたみボタン

ボタン、リンクなど、任意の要素を折りたたみボタンとして使用できます。data-toggle="collapse" および data-target 属性をボタンに追加します。

3. 折りたたみターゲット

折りたたみターゲット要素には、折りたたみボタンと関連付けるために一意の ID を設定する必要があります。上記の例では、collapseExample がターゲット要素の ID です。

二、折りたたみ状態を制御する

折りたたみ状態は、JavaScript、CSS クラス、または初期状態で制御できます。

1. JavaScriptによる制御

JavaScript を使用すると、折りたたみ状態を動的に制御できます。

• $('#myCollapse').collapse('show'): 折りたたみコンテンツを展開します。
• $('#myCollapse').collapse('hide'): 折りたたみコンテンツを非表示にします。

2. CSSクラスによる制御

show クラスを追加または削除することで、折りたたみ状態を制御することもできます。

• <div class="collapse show">: コンテンツを展開した状態で表示します。
• <div class="collapse">: コンテンツを折りたたんだ状態で表示します。

3. 初期状態

show クラスを使用して、折りたたみコンテンツの初期状態を展開に設定できます。

三、構成オプション

折りたたみコンポーネントには、カスタマイズに使用できるいくつかの構成オプションがあります。

イベント

折りたたみコンポーネントは、折りたたみ状態の変化をリッスンして対応するアクションを実行するために使用できる一連のイベントを提供します。

四、インスタンスのデモ

1. 基本的な折りたたみ

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
  折りたたむ
</button>
<div class="collapse" id="collapseExample1">
  <div class="card card-body">
    折りたたみ可能なコンテンツ
  </div>
</div>

2. 折りたたみパネルグループ

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          折りたたみパネル #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        折りたたみ可能なコンテンツ #1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          折りたたみパネル #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        折りたたみ可能なコンテンツ #2
      </div>
    </div>
  </div>
</div>

五、関連プラグイン

• アコーディオン（Accordion）: 折りたたみコンポーネントに基づいて実装されたアコーディオン効果。

まとめ

Bootstrap4 の折りたたみコンポーネントは、折りたたみ可能なコンテンツ領域を作成するためのシンプルで柔軟な方法を提供します。折りたたみ状態を簡単に制御し、さまざまなインタラクティブな効果を実現できます。

よくある質問

1. 折りたたみ可能なコンテンツをデフォルトで展開するにはどうすればよいですか？

折りたたみ可能なコンテンツをデフォルトで展開するには、<div class="collapse"> に show クラスを追加します。

2. 折りたたみ可能なコンテンツが正しく機能しません。何が問題でしょうか？

考えられる問題点は次のとおりです。

• 必要な Bootstrap JavaScript ファイルが含まれていない。
• 折りたたみボタンとターゲット要素の ID が正しく関連付けられていない。
• 他の JavaScript コードと競合している。

3. 複数の折りたたみ可能なコンテンツを同時に展開できますか？

はい、data-parent 属性を使用せずに、複数の折りたたみ可能なコンテンツを同時に展開できます。