<details>

概要

<details> 要素は、ユーザーが操作して表示・非表示を切り替えられる追加情報のウィジェットを作成します。

対応ブラウザ

基本構文

<details>
  <summary>詳細を表示</summary>
  <p>ここに隠れたコンテンツが入ります。</p>
</details>

<details open>
  <summary>最初から開いている</summary>
  <p>open 属性で初期状態を開いた状態にできます。</p>
</details>

実務での使いどころ

• <details> の活用

  ユーザーが開閉できる詳細情報ウィジェット。アコーディオンUIに使用。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — <details>
• Can I use — <details>