Tag <detail> HTML


Contoh

Tentukan detail yang dapat dibuka dan ditutup pengguna sesuai permintaan:

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Lebih banyak contoh "Coba Sendiri" di bawah ini.


Definisi dan Penggunaan

Tag <details>menentukan detail tambahan yang dapat dibuka dan ditutup pengguna sesuai permintaan.

Tag <details>sering digunakan untuk membuat widget interaktif yang dapat dibuka dan ditutup oleh pengguna. Secara default, widget ditutup. Saat dibuka, itu mengembang, dan menampilkan konten di dalamnya.

Segala jenis konten dapat dimasukkan ke dalam <details>tag. 

Tip: Tag <summary> digunakan bersama <details>untuk menentukan heading yang terlihat untuk detailnya.


Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung elemen tersebut.

Element
<details> 12.0 79.0 49.0 6.0 15.0

Atribut

Attribute Value Description
open open Specifies that the details should be visible (open) to the user

Atribut Global

Tag <details>juga mendukung Atribut Global dalam HTML .


Atribut Acara

Tag <details>juga mendukung Atribut Peristiwa dalam HTML .



Lebih Banyak Contoh

Contoh

Gunakan CSS untuk menata <details> dan <ringkasan>:

<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>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

</body>
</html>

Halaman Terkait

Referensi DOM HTML: Objek Detail


Pengaturan CSS Default

Sebagian besar browser akan menampilkan <details>elemen dengan nilai default berikut:

details {
  display: block;
}