details要素

<details>~</details>

details（ディテールス）要素は閲覧者が操作可能な開閉式のウィジェットを表します。見出しをクリックすると開閉する階層型メニューを作成できる。

open属性によって最初から開いた状態を指定したり、name属性をつかって、複数のdetails要素をグループ化し、グループ内のdetails要素が1つ開いたら、他を閉じる、といった動作をさせることも可能。

details要素	説明
カテゴリー	・インタラクティブコンテンツ・パルバブルコンテンツ・フローコンテンツ
コンテンツモデル	フローコンテンツ最初の子要素としてsummary要素が1つ必須
使用できる場所	フローコンテンツが期待される場所

details要素で使用できる属性

すべてのHTML要素で使用できる属性になります。

属性値は論理属性。

open属性が指定されたdetails要素の内容、dialog要素は初期状態で表示され、閲覧者が操作可能です。open属性が指定されていないdetails要素は初期状態で内容が折りたたまれ、dialog要素はレンダリングされない。

name属性は、要素に名前を付与します。この名前を使用して、JavaScriptから要素にアクセスしたり、iframe要素に付与した名前はリンクのターゲットに使用したりすることができる。

details要素に付与されたname属性値は、details要素をグループ化する。

複数のdetails要素にname属性で同じ名前を付けると、それらはグループと見なされ、相互に排他的な動作、つまり「1つを開いた時に他を閉じる」という動作を実現できる。

使用例

<details>
  <summary>見出し１</summary>
    <p>詳細情報。</p>
</details>
<details>
  <summary>見出し２</summary>
    <p>詳細情報。</p>
</details>

表示

見出し１

詳細情報。

見出し２

詳細情報。

カテゴリー：

タグ：