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

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

サンプル

文字の横のマークをクリックすると詳細情報が開きます。再度、マークを押すと詳細情報が閉じます。

テスト

テストデータです。123456789123456789123456789123456789123456789123456789

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

コード

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>detailsのサンプル</title>
</head>
<script>
</script>
<body >

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

</body>
</html>

関連の記事

HTML5 Canvas要素で三角形を表示するサンプル
HTML5 Canvas要素で長方形と円を表示するサンプル
HTML5 video要素で動画ファイルを再生するサンプル
HTML5 プログレスバーの動きを表示するサンプル(progress)
HTML5 入力欄に入力候補を表示するサンプル(datalist)
HTML5 スライダーで数値を入力するサンプル(range)
HTML5 クリックして詳細情報を開く/閉じるサンプル(detailsとsummary)
HTML5 Geolocationの現在位置を取得するサンプル
HTML5 Web Storageのサンプル(Session StorageとLocal Storage)



△上に戻る