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

関連の記事

HTML 進捗状況を表示するプログレスバー
HTML 入力欄に入力候補を表示する(datalist)

△上に戻る