アコーディオン

アコーディオン（折りたたみウィジェット）

アコーディオン（折りたたみウィジェット）のコンポーネントにはsu-accordion、ならびにsu-accordion-summaryとsu-accordion-detailのクラス名を付与します。

details要素とsummary要素を用いてマークアップします。また、summary要素に続く、詳細コンテンツ部分はp要素や、div要素など、文脈に応じて適切にマークアップします。上記クラス名を付与することでスタイルが適用されます。文字ウエイトや背景色、ボーダー、余白が調整されます。

概要テキストと詳細コンテンツに分かれ、詳細説明の部分を折りたたみで表示切り替えできるコンテンツを表示します。概要テキストは強調表示され、詳細コンテンツは背景色と余白が付与され、概要テキストと詳細コンテンツの違いを明示します。

※このコンポーネントはデフォルトでsummary要素マーカーUIは非表示となります。
※正しくスタイルを適用させるため、summary要素に続く詳細コンテンツ部分は、直接テキストノードで配置せず、何らかのHTML要素でマークアップします。

<details class="su-accordion">
  <summary 
    class="su-accordion-summary" 
    aria-expanded="false"
  >
    概要テキスト（クリック等で詳細コンテンツの表示切り替え）
  </summary>
  <p 
    class="su-accordion-detail" 
    aria-hidden="true"
  >
    詳細コンテンツ
  </p>
</details>

アコーディオンのボーダー色や角丸サイズ、詳細コンテンツの背景色はCSS変数を使って変更することが可能です。

.su-accordion {
  --su-color-border-accordion: red;
  --su-size-radius-accordion: 8px;
  --su-color-bg-detail-accordion: lime;
}

アイコンの表示

アコーディオンのコンポーネントに対してsu-accordion-add-icon-[POSITION]のクラス名を追加することで、概要テキストの横に詳細コンテンツの展開を案内するアイコンを表示させることができます。表示位置はleftもしくはrightのいずれかをサフィックスとすることで、対応した位置にアイコンが表示されます。アイコンは詳細コンテンツの開閉状態に応じて表示が切り替わります。

<!-- 概要テキストの左側にアイコンを表示 -->
<details 
  class="su-accordion su-accordion-add-icon-left"
>
  <summary 
    class="su-accordion-summary" 
    aria-expanded="false"
  >
    概要テキスト（左側にアイコン表示）
  </summary>
  <p 
    class="su-accordion-detail" 
    aria-hidden="true"
  >
    詳細コンテンツ
  </p>
</details>

<!-- 概要テキストの右側にアイコンを表示 -->
<details 
  class="su-accordion su-accordion-add-icon-right"
>
  <summary 
    class="su-accordion-summary" 
    aria-expanded="false"
  >概要テキスト（右側にアイコン表示）
  </summary>
  <p 
    class="su-accordion-detail" 
    aria-hidden="true"
  >
    詳細コンテンツ
  </p>
</details>

アニメーション表現

アコーディオンのコンポーネントに対してdata-su-jsのカスタムデータ属性を追加し、下記のようにマークアップすることで、詳細コンテンツ展開時の挙動に対してアニメーションを適用させることができます。正しいアニメーションの挙動のために詳細コンテンツ要素をラッピングする必要がある点に注意します。

概要テキスト要素にdata-su-js="su-accordion-summary"の属性値を、 詳細コンテンツをラッピングする要素にdata-su-js="su-accordion-detail"の属性値をそれぞれ付与します。

<!-- 詳細コンテンツの展開にアニメーション表現を追加 -->
<details 
  class="su-accordion" 
  data-su-js="su-accordion" 
>
  <summary 
    class="su-accordion-summary" 
    data-su-js="su-accordion-summary" 
    aria-expanded="false"
  >
    概要テキスト（クリック等で詳細コンテンツの表示切り替え）
  </summary>
  <!-- 詳細コンテンツは1つの要素でラッピングする -->
  <div 
    data-su-js="su-accordion-detail"
  >
    <p 
      class="su-accordion-detail"
      aria-hidden="true"
    >
      詳細コンテンツ（アニメーションで展開）
    </p>
  </div>
</details>

アクセシビリティの支援

アコーディオンのコンポーネントではアクセシビリティの対応として、summary要素に対して、aria-expanded属性を指定することで、スクリーンリーダーに対して、詳細コンテンツが展開されているかどうかを適切に伝えることができます。また、詳細コンテンツ要素に対して、aria-hidden属性を指定し、展開されていない状態ではスクリーンリーダーに対して非表示であることを明示するようにします。

これらの属性値は動的に切り替える必要がありますが、Startify-UIで提供されているスクリプトにはこの処理が組み込まれています。（スクリプトの読み込みが必須となります）

<!-- 初期状態で詳細コンテンツを非表示 -->
<details class="su-accordion">
  <summary 
    class="su-accordion-summary" 
    aria-expanded="false"
  >
    概要テキスト（クリック等で詳細コンテンツの表示切り替え）
  </summary>
  <p 
    class="su-accordion-detail" 
    aria-hidden="true"
  >
    詳細コンテンツ
  </p>
</details>

<!-- 初期状態で詳細コンテンツを表示 -->
<details class="su-accordion" open>
  <summary 
    class="su-accordion-summary" 
    aria-expanded="true"
  >
    概要テキスト（クリック等で詳細コンテンツの表示切り替え）
  </summary>
  <p 
    class="su-accordion-detail" 
    aria-hidden="false"
  >
    詳細コンテンツ
  </p>
</details>