HTML : details (ディテール) の解説 | 独学 Webプログラミング!

この要素は折りたたみウィジェットを表します。

details要素内に詳細情報を記述しておき、ユーザーのニーズによって詳細情報を表示するか、しないかを選択できるようにすることができます。

この要素には、開始タグと終了タグが必要です。
<details> </details>

また、この要素内に <summary> </summary> を内包した場合には、 summary 要素の内容がウィジェットのラベルとして使用されます。

このサンプルではdetailという単語についての情報を開閉式のウィジェットで表示できるようにしています。

サンプルコード:

<body>
	<details id="idDetails">
		<summary> detail </summary>
		detail は日本語でディテールと読みます。<br>
		これは「詳細」とか「細部」などの意味をもつ単語です。
	</details>
</body>

実行結果:
detail detail は日本語でディテールと読みます。これは「詳細」とか「細部」などの意味をもつ単語です。

open 属性はウィジェットの開閉状態を操作するための属性です。この属性値は論理型であり、 HTMLで記述する場合にはタグ内に open と記述するか、しないかのどちらかになります。
つまり、<details open> もしくは <details> のどちらかということです。

また、下記のサンプルは open 属性を javascript から操作するサンプルコードです。 javascript では論理型のプロパティ値は true か false となります。

以下のサンプルは、前セクションのサンプルと連動しています。

<body>
	<button onclick="funcOpenClose()"> ディテールの開閉 </button>
	<script>...</script>
</body>

<script>
	function funcOpenClose(){
		if(idDetails.open == false){
			idDetails.open = true;
		}
		else{
			idDetails.open = false;
		}
	}
</script>

summary 要素は CSS の list-style プロパティに対応しています。しかし、まだ未対応のブラウザも存在するので使用には配慮が必要です。このコードは上記の実行結果のサンプルに連動しています。

details > summary{
	list-style-type: '開閉 > ';
	border: thin solid #aaa;
	border-radius: 4px;
	padding: 0.5em;
}

Title