Bootstrapの折りたたみ

この記事では、Bootstrapフレームワークの折りたたみコンポーネントの使用方法について説明します。データ属性またはJavaScriptを使用して、折りたたみ要素の展開と非表示を制御する方法を含めます。

一、入門ガイド

1. 概要

折りたたみコンポーネントを使用すると、ユーザーが必要とするまでページの内容を非表示にすることができます。これは、FAQセクション、アコーディオンメニュー、またはスペースを節約する必要があるその他の動的なコンテンツを作成するのに役立ちます。

2. 使用方法

折りたたみコンポーネントを使用するには、以下の手順に従います。

1. data-bs-toggle="collapse"属性とdata-bs-target="#your-collapse-id"属性を、ボタンやリンクなどの要素に追加します。data-bs-target属性の値は、折りたたみ対象の要素のIDと一致している必要があります。

2. 折りたたみ対象の要素にcollapseクラスを追加し、制御要素のdata-bs-target属性と同じIDを指定します。

二、例

1. シンプルな折りたたみ

以下は、基本的な折りたたみ要素を作成する例です。

<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. アコーディオン

以下は、accordionクラスを使用して、一度に1つの折りたたみ要素のみを展開できるアコーディオン効果を作成する例です。

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        アコーディオンアイテム1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        アコーディオンアイテム1の内容です。
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        アコーディオンアイテム2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        アコーディオンアイテム2の内容です。
      </div>
    </div>
  </div>
</div>

三、アクセシビリティ

折りたたみコンポーネントのアクセシビリティを向上させるために、以下のaria属性を使用します。

• aria-expanded：制御要素（ボタンやリンクなど）が折りたたみ要素を展開しているかどうかを示します。

• aria-controls：制御要素が制御する折りたたみ要素のIDを指定します。

• role="button"：制御要素がボタンとして機能することを示します。

四、JavaScriptの動作

1. オプション

以下の表は、JavaScriptを使用して制御できる折りたたみコンポーネントのオプションを示しています。

2. イベント

以下の表は、折りたたみコンポーネントに関連するJavaScriptイベントを示しています。

五、カスタマイズ

1. テーマ

Scss変数を変更することで、折りたたみコンポーネントの外観をカスタマイズできます。以下は、カスタマイズ可能な変数の一例です。

• $collapse-transition-duration：折りたたみアニメーションの期間を変更します。

• $collapse-transition-timing-function：折りたたみアニメーションのタイミング関数を変更します。

Bootstrapの折りたたみに関するFAQ

1. 特定の折りたたみ要素をデフォルトで開いたままにするにはどうすればよいですか？

collapseクラスに追加してshowクラスを追加し、制御要素のaria-expanded属性をtrueに設定します。

2. アコーディオン内で複数の折りたたみ要素を同時に開くことはできますか？

いいえ、デフォルトではアコーディオンは一度に1つの折りたたみ要素のみを展開するように設計されています。複数の折りたたみ要素を同時に開く場合は、カスタムJavaScriptまたは別のライブラリを使用する必要があります。

3. 折りたたみのアニメーションを無効にするにはどうすればよいですか？

collapseクラスに追加してcollapsingクラスを削除します。