<details>
<details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは <summary> 要素を使用して提供する必要があります。
折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <summary> 要素のコンテンツは、折りたたみウィジェットのラベルとして使用されます。 <details> のコンテンツは、 <summary> のアクセシブル説明を提供します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 12 | 79 | 49 | 6 | 18 | 6 | |
| HTML 属性 | ||||||
open | 12 | 79 | 49 | 6 | 18 | 6 |
display_list_item 表示：リスト項目 | 89 | 89 | 49 | | 89 | |
| DOM API | ||||||
| HTMLDetailsElement インターフェイスは、（継承によって利用できる通常の HTMLElement インターフェイスのもの以外の）details を操作するための特殊なプロパティを提供します。 | 10 | 79 | 49 | 6 | 18 | 6 |
| open は HTMLDetailsElement インターフェイスのプロパティで、HTML の open 属性を反映するもので、details の中身（summary を除く）がユーザーに表示されているかを示す論理値です。 | 10 | 79 | 49 | 6 | 18 | 6 |
| toggle は HTMLElement インターフェイスのイベントで、Popover_API要素（すなわち有効な popover 属性がある要素）において、表示または非表示になった直後に発行されます。 | 36 | 79 | 49 | 10.1 | 36 | 10.3 |
toggle_event (details elements) 詳細要素で `toggle` イベントが発生する | 36 | 79 | 49 | 10.1 | 36 | 10.3 |
| その他 | ||||||
| は HTML の要素で、 details 要素の折りたたみボックスの要約、キャプション、説明、凡例を表します。 要素をクリックすると、親の 要素の開閉状態を切り替えることができます。 | 12 | 79 | 49 | 6 | 18 | 6 |
- Firefox 57 より前のバージョンでは、`<details>` 要素に CSS の `animation` が有効になっている場合、`open` 属性を使用してデフォルトで開くことができないというバグがありました。
基本構文
<details>
<summary>View Details</summary>
<p>Hidden content goes here.</p>
</details>
<details open>
<summary>Open by default</summary>
<p>You can use the `open` attribute to set the initial state to open.</p>
</details>ライブデモ
FAQ accordion
JavaScriptnot-main. accordionUI create.HTML edit add only is. with details + summary
Settings panel
Open attribute in initialperiodstate state to in..formelement and. combinationexample.
Name Attribute in accordion
same name attribute has details is exclusive to toggle.(1 onlyOpen).
実務での使いどころ
-
<details> の活用
<details> は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。