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;
}