Tag HTML <details>

  • Halaman sebelumnya <del>
  • Halaman berikutnya <dfn>

Definisi dan penggunaan

<details> Tag menentukan halaman detil lain yang dapat dibuka dan ditutup pengguna sesuai kebutuhan.

<details> Tag biasanya digunakan untuk membuat widget interaktif yang dapat dibuka dan ditutup pengguna. Secara default, widget ini ditutup. Saat dibuka, ia akan mengecualikan dan menampilkan kontennya.

Isi apapun dapat disisihkan dalam <details> pada tag.

Petunjuk:<summary> tag dengan <details> Kombinasikan untuk menentukan judul yang dapat dilihat untuk halaman detil. Ketika pengguna mengklik judul, halaman detil akan <details> Isi yang didedefiniskan.

Lihat juga:

Panduan HTML DOM:Objek Details

Contoh

Contoh 1

Definisi halaman detil yang dapat di buka dan ditutup pengguna sesuai kebutuhan:

<details>
  <summary>Pusat Dunia masa Depan (Epcot Center)</summary>
  <p>Epcot adalah taman tema di Walt Disney World Resort, yang memiliki tempat menarik, pavilion internasional, kembang api yang mendapat penghargaan dan aktivitas musiman.</p>
</details>

Coba sendiri

Contoh 2

Atur gaya <details> dan <summary> menggunakan CSS:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>Pusat Dunia masa Depan (Epcot Center)</summary>
  <p>Epcot adalah taman tema di Walt Disney World Resort, yang memiliki tempat menarik, pavilion internasional, kembang api yang mendapat penghargaan dan aktivitas musiman.</p>
</details>
</body>
</html>

Coba sendiri

Properti

Properti Nilai Deskripsi
open open Tentukan bahwa detil harus terlihat bagi pengguna (terbuka).

Properti global

<details> Tanda ini juga mendukung Properti global HTML.

Properti acara

<details> Tanda ini juga mendukung Properti acara HTML.

Pengaturan CSS default

Sebagian besar browser akan menampilkan nilai default berikut ini <details> Elemen:

details {
  display: block;
}

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung elemen ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0
  • Halaman sebelumnya <del>
  • Halaman berikutnya <dfn>