Bootstrap5を使用してアコーディオンを作成する方法

アコーディオンは、大量のデータを配置したり、ユーザーの好みに応じて非表示にしたり表示したりできる、複数の折りたたみ可能な要素をラップします。 アコーディオンを使用することの究極の利点は、単一のWebページ上の大きなコンテンツの乱雑さを防ぐことです。 さらに、アコーディオンはWebページを短くすることでユーザーエクスペリエンスを向上させ、それによってスクロールを減らします。

Bootstrap 5を使用してアコーディオンを作成する方法については、以下の記事をお読みください。

Bootstrap5を使用してアコーディオンを作成する方法

以下の例では、Bootstrap5を使用してアコーディオンを作成する方法を示します。

HTML

アコーディオンを作成する最初のステップは、親のdivコンテナーを作成し、それにIDを割り当てることです。 ここでは、「アコーディオン」というラベルの付いたIDを割り当てています。 この親divコンテナの目的は、折りたたみ可能な要素の1つが表示されているときに、他のすべての折りたたみ可能な要素を非表示にすることです。

HTML

この例では、カードコンポーネントを使用してアコーディオンを生成します。 したがって、上記のコードでは、カードに割り当ててカードを作成しています。 。カード divコンテナへのクラス。 その後、を使用してカードのヘッダーを作成しています .card-header クラスと、コンテンツを非表示/表示するアンカータグがヘッダー内にネストされ、IDを使用して折りたたみ可能なdivに接続されています。

最後に、divを使用して折りたたみ可能にしました 。崩壊 クラスとカード本体は折りたたみ可能なコンテナ内にネストされていました。 ご了承ください data-bs-parent =“＃id” 折りたたみ可能なものの1つが表示されているときに、他のすべての折りたたみ可能なものを親divコンテナの下に非表示にします。

HTML

別のカードは、最初のカードに使用されたのと同じ手法を使用して生成されました。 唯一の違いは、アンカータグを折りたたみ可能なdivに接続するために使用されるIDが、最初のカードに使用されるIDと異なることです。

HTML

同じアプローチを使用して、アンカータグを折りたたみ可能なdivコンテナにリンクする別のIDを持つさらに別の折りたたみ可能なカードを作成しました。

出力

アコーディオンが正常に生成されました。

ノート： data-bs-parent属性を除外すると、他のアイテムが開いている間、アコーディオンアイテムは開いたままになります。

上に示した手法に従って、Bootstrap5を使用してアコーディオンを簡単に生成できます。

結論

アコーディオンを作成するには、divコンテナなどの要素を使用して折りたたみ可能にする必要があります。 。崩壊 そのような折りたたみ可能な要素を親要素内にクラス分けしてネストします。 上記の記事では、カードを使用してアコーディオンを生成しています。 ヘッダーとボディの合計3枚のカードが生成され、折りたたみ可能になりました。 各カードは、折りたたみ可能な各カード内に配置されたコンテンツを非表示/表示するために使用されるアンカータグにリンクされていました。 また、 data-bs-parent =“＃id” 1つが表示されている間、親要素の下にある他のすべての折りたたみ可能要素を非表示にするために使用されました。