HTML detailsとsummary クリックで詳細を開く

サンプル	クリックして詳細を開く/閉じるサンプル
	初期表示は開いておく場合
	details要素

クリックして詳細を開く/閉じるサンプル

文字「テスト」の行をクリックすると詳細情報が開きます。
再度、マークを押すと詳細情報が閉じます。

テスト1

テストデータです1。123456789123456789

テストデータです2。123456789123456789

テストデータです3。123456789123456789

テスト2

テストデータです4。123456789123456789

テストデータです5。123456789123456789

テストデータです6。123456789123456789

上記サンプルのコードです。

<details>
  <summary>テスト1</summary>
  <p>テストデータです1。123456789123456789</p>
  <p>テストデータです2。123456789123456789</p>
  <p>テストデータです3。123456789123456789</p>
</details>
<details>
  <summary>テスト2</summary>
  <p>テストデータです4。123456789123456789</p>
  <p>テストデータです5。123456789123456789</p>
  <p>テストデータです6。123456789123456789</p>
</details>

detailsタグでsummaryタグをくくります。
summryタグに挟まれた部分は初期に表示され、それ以外の部分はクリックすると表示されます。

初期表示は開いておく場合

<details open>
  <summary>テスト1</summary>
  <p>テストデータです1。123456789123456789</p>
  <p>テストデータです2。123456789123456789</p>
  <p>テストデータです3。123456789123456789</p>
</details>

初期表示は開いておく場合は、detailsの横にopenを追加します。

details要素

detailsタグでくくります。<details>～</details>。
detailsタグの中にsummary要素を入れます。
IEは対応していません。詳細情報が開いた状態で表示されます。
以下はMDNのdetails要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/details

summary要素

最初から表示しておく文字をsummaryタグでくくります。<summary>～</summary>。
summary要素が省略された場合、「詳細」を意味する文字が自動で表示されます。
以下はMDNのsummary要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/summary