アコーディオン Bric 大量のコンテンツを非表示にするか表示するかを分解して切り替える方法を提供します。 アコーディオンは、次のようなさまざまなサブ要素で構成されています。 カード Bric や 本部 コンテナ Bric、これにより、簡単にカスタマイズして、個別にスタイルを設定できます。
アコーディオンセクションをさらに追加するには、レイヤーツリーからカードのXNUMXつ（メインのアコーディオンdivコンテナー内にあります）を選択し、キーボードショートカットを使用して複製します。 ⌘D.
Structure
アコーディオンの構造は他のほとんどのものより少し複雑です Brics 内で見つかりました Blocs。 それはで構成されています 本部 コンテナ Bric それは に設定 アコーディオンコンテナ とその ID たとえば、一意の値に設定します アコーディオン-17605。 このコンテナ内には複数あります カード Brics。 各カード Bric ています リンク Bric カードヘッダーセクション内および追加 本部 カード本体セクションを含むコンテナ。
コミュニケーション
アコーディオン Bric 機能は、 リンク Bric （カードのヘッダーセクション内にあります）および 本部 コンテナ（カード本体セクションを含む）。 これらのアイテムの両方が持っています カスタムデータ属性 それらに典型的なアコーディオン機能を与え、それらが互いに通信できるようにするためにそれらに適用されます。
アコーディオンリンク Bric
リンクは、アコーディオンセクションを表示するためにクリックする要素です。 このアイテムには、アコーディオンの一部として機能するための特定の設定があります。 それは 相互作用 に設定 なし また、さまざまなカスタムデータ属性があります。最も重要なXNUMXつは データターゲット や アリアコントロール.
リンクデータ属性
また, データターゲット 属性には、たとえば一意の参照に設定された値があります ＃accordion-17605-item-1を選択します。 アリアコントロール 属性には、とほぼ同じ値が含まれています データターゲット 属性ですが、たとえば、先頭の＃が削除されています アコーディオン-17605-item-1。 これらの一意の参照は、 ID カード本体がネストされている対応するdivコンテナの。
アコーディオンDivコンテナ
各カード内 Bric （アコーディオンのメインコンテナ内にあります）は追加です 本部 そのを持っているコンテナ ID たとえば、一意の値に設定します アコーディオン-17605-item-1。 このID値は、カスタムデータ属性に対応し、一致する必要があります。 データターゲット や アリアコントロール リンクで見つかりました Bric （カードヘッダーセクションにあります）。
このdivコンテナ Bric さまざまなカスタムデータ属性も含まれていますが、最も重要なものは データ-親。 このデータ属性のこの値は、 ID たとえば、メインアコーディオンコンテナの ＃アコーディオン-17605。 このデータ属性は、このセクションが関連するアコーディオンコンテナをブラウザに通知します。
アコーディオンリンクのデータ属性を変更した場合 データターゲット or アリアコントロール、更新するように注意してください ID 関連するdivコンテナ（カード本体セクションを含む）の場合、およびその逆の場合。
アコーディオンの仕組みの詳細については、以下を参照してください。 ブートストラップ4ドキュメント.