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