HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)

nas

HTML5のクリックして詳細情報を開く/閉じるサンプルです。
details要素とsummary要素を使用します。

確認環境
・Windows10
・Google Chrome

目次

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

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

テスト

テストデータです。123456789123456789

 

コード

上記サンプルのコードです。
detailsタグでsummaryタグをくくります。
summryタグに挟まれた部分は初期に表示され、それ以外の部分はクリックすると表示されます。

<body >

<details>
<summary>テスト</summary>
テストデータです。123456789123456789
</details>

</body>

details要素

  • detailsタグでくくります。<details>～</details>。
  • detailsタグの中にsummary要素を入れます。
  • Edge、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

関連の記事

HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)

△上に戻る