<details> ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置する

<details>タグの説明

<details>は、ユーザーのリクエストに応じて追加情報を提供するディスクロージャー・ウィジェットを設置するために使用します。ディスクロージャー・ウィジェットとは、表示／非表示を切り替えることが可能な折りたたみ式のインターフェイスのことです。

このタグの登場によって、折りたたみ式のインターフェイスが簡単に作れるようになりました。今までJavaScriptやCSSに頼っていた機能が、HTMLのみで完成します。

<details>は要約した概要の詳細を表すものです。この内容を簡潔に表すラベルや概要は<summary>で定義します。

<details>タグの特徴

• レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
• 視覚的な効果として、開閉を表す三角形のアイコンが<summary>の開始地点に表示されます。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<details>に指定できる主な属性

open

ページ読み込み時に、あらかじめ詳細を開いておく場合に追加します。指定しない場合は初期状態で詳細が非表示となります。この属性は論理属性のため、詳細を非表示にする場合は完全に削除する必要があります。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<details>の使い方とサンプル

このタグを使ったマークアップのサンプルです。表示確認で<summary>で囲われた行をクリック（タップ）してみましょう。

<details>
	<summary>summaryタグで指定した要約</summary>
	<div>details要素に含まれる詳細内容。</div>
</details>

open属性を与えて、初めから内容を開示しておくこともできます。

<details open>
	<summary>open属性を与えたdetails</summary>
	<div>予め詳細を開いておきたい場合は、open属性をマークアップに加えます。</div>
</details>

アコーディオン形式のメニューを作成する

<details>を活用して、アコーディオン形式のメニューを作ることもできます。以下の例では、CSSのアニメーションで内容を展開した時の見栄えを調整しています。

<details id="dnav">
	<summary>ナビゲーション</summary>
	<ul>
		<li><a href="#">リスト項目</a></li>
		<li><a href="#">リスト項目</a></li>
		<li><a href="#">リスト項目</a></li>
		<li><a href="#">リスト項目</a></li>
		<li><a href="#">リスト項目</a></li>
	</ul>
</details>

#dnav {
	background: #eee;
}
#dnav summary {
	cursor: pointer;
	list-style: none;
	padding: .5em;
	background: #333;
	color: #eee;
	text-align: center;
}
#dnav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 1px 3px;
	margin: 0;
	padding: .3em;
}
#dnav li > a {
	display: block;
	padding: .5em;
	background: #fff;
	text-decoration: none;
}
#dnav li > a:hover {
	color: #fff;
	background: #0099ff;
}
#dnav[open] ul {
	animation: fadein 0.5s ease;
}
@keyframes fadein {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}