Temukan bagaimana detail dan elemen ringkasan yang sangat berguna bekerja, dan di mana tempat untuk menggunakannya.
Widget pengungkapan adalah kontrol antarmuka pengguna yang menyembunyikan dan menampilkan konten. Jika Anda membaca ini di web.dev, dan lebar area pandang kurang dari 106 ems, dengan mengklik tombol "Di halaman ini" di atas paragraf ini mengungkapkan daftar isi untuk bagian ini. Jika Anda tidak melihatnya, perbesar browser untuk melihat navigasi daftar isi pada halaman ini sebagai widget pengungkapan.
Antarmuka pengguna grafis Akordeon adalah serangkaian rangkaian yang ditumpuk secara vertikal widget pengungkapan. Kasus penggunaan umum untuk UI akordeon adalah halaman Pertanyaan Umum (FAQ) di banyak situs. FAQ akordeon berisi daftar pertanyaan yang terlihat; mengeklik pertanyaan akan memperluas, atau "mengungkap", jawaban atas pertanyaan itu.
jQuery telah menyertakan pola UI akordeon setidaknya sejak tahun 2009. Versi asli tanpa JavaScript
solusi akordeon mencakup menjadikan setiap pertanyaan FAQ menjadi <label> diikuti dengan tanda centang yang diberi label, lalu menampilkan <div>
jika tanda centang dicentang. CSS akan terlihat seperti ini:
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
Mengapa perlu sejarah? Widget pengungkapan, seperti akordeon, tanpa JavaScript atau hack kontrol formulir, merupakan game yang relatif baru
tambahan; <details> dan <summary>
baru didukung sepenuhnya di semua {i>browser<i} modern sejak Januari 2020. Anda sekarang dapat membuat fungsi, meskipun lebih sedikit
daripada widget pengungkapan yang menarik yang hanya menggunakan HTML semantik. Anda hanya memerlukan elemen <details> dan <summary>: keduanya merupakan cara bawaan untuk menangani
memperluas dan menciutkan konten. Saat pengguna mengklik atau mengetuk <summary>, atau melepaskan tombol Enter saat
<summary> memiliki fokus, konten dari tombol <details> induk menjadi terlihat.
Seperti semua konten semantik, Anda dapat meningkatkan kualitas fitur dan tampilan default secara bertahap. Dalam hal ini, sedikit CSS telah ditambahkan, tetapi tidak ada yang lain:
Perlu diketahui bahwa Codepen ini tidak berisi JavaScript.
Mengalihkan visibilitas: atribut open
Elemen <details> adalah penampung widget pengungkapan. <summary> adalah ringkasan atau legenda untuk <details> induknya. Tujuan
ringkasan selalu ditampilkan, bertindak sebagai tombol yang mengalihkan tampilan konten induk lainnya. Berinteraksi
dengan <summary> akan mengalihkan tampilan saudara ringkasan yang diberi label sendiri dengan mengalihkan <details>' atribut open elemen.
Atribut open adalah atribut boolean. Jika ada, apa pun nilai atau ketiadaannya, ini menunjukkan bahwa semua <details>
konten ditampilkan kepada pengguna. Jika atribut open tidak ada, hanya konten <summary> yang ditampilkan.
Karena atribut open ditambahkan dan dihapus secara otomatis saat pengguna berinteraksi dengan kontrol, atribut tersebut dapat digunakan di CSS untuk
menata gaya elemen secara berbeda
berdasarkan statusnya.
Anda dapat membuat akordeon dengan daftar beberapa elemen <details>, masing-masing dengan turunan <summary>. Menghapus atribut open
di HTML Anda berarti <details> semuanya akan diciutkan, atau ditutup, hanya dengan judul ringkasan yang terlihat saat halaman dimuat;
setiap judul menjadi pembuka untuk seluruh konten dalam <details> induk. Jika Anda menyertakan atribut open di HTML, <details>
akan merender diperluas, dengan konten yang terlihat, saat halaman dimuat.
Konten tersembunyi dalam status diciutkan dapat ditelusuri di beberapa browser, tetapi tidak di browser lain, meskipun konten yang diciutkan bukan bagian dari DOM. Jika Anda melakukan penelusuran di Edge atau Chrome, detail yang berisi istilah penelusuran akan diperluas untuk ditampilkan kemunculannya. Perilaku ini tidak direplikasi di Firefox atau Safari.
<summary> harus merupakan turunan pertama elemen <details>, yang mewakili ringkasan, teks, atau legenda untuk sisanya
dari konten elemen <details> induk tempatnya disarangkan. Konten elemen <summary> dapat berupa judul apa pun
konten, teks biasa, atau HTML yang dapat digunakan dalam sebuah paragraf.
Mengalihkan penanda ringkasan
Di dua Codepens sebelumnya, Anda akan memperhatikan panah pada bagian inline-start
ringkasan. Widget pengungkapan biasanya ditampilkan di layar menggunakan segitiga kecil yang berputar (atau berputar)
untuk menunjukkan status terbuka/tertutup, dengan label di samping segitiga. Konten elemen <summary> memberi label pada widget pengungkapan.
Panah berputar di atas setiap bagian adalah ::marker yang ditetapkan pada
elemen <summary>. Seperti item daftar, elemen <summary> mendukung list-style
properti singkat dan properti longgarnya, termasuk list-style-type.
Anda dapat menata gaya segitiga pengungkapan dengan CSS, termasuk mengubah penanda yang digunakan dari segitiga menjadi jenis butir lainnya, termasuk
gambar dengan list-style-image.
Untuk menerapkan gaya lain, gunakan pemilih yang mirip dengan details summary::marker. Tujuan
elemen semu ::marker hanya menerima gaya dalam jumlah terbatas. Menghapus
::marker dan menggantinya dengan ::before yang lebih mudah ditata gayanya
praktik yang umum, dengan gaya CSS mengubah gaya konten yang dihasilkan sedikit berdasarkan ada atau tidaknya
dari atribut buka. Anda dapat menghapus ikon widget pengungkapan dengan menyetel list-style: none atau menyetel konten
penanda ke none, tetapi selalu sertakan indikator visual untuk memberi tahu pengguna yang dapat melihat bahwa konten ringkasan adalah tombol
yang akan menampilkan dan menyembunyikan
konten setelah aktivasi.
details summary::before {
/* all the styles */
}
details[open] summary::before {
/* changes applied when open only */
}
Contoh ini menghapus penanda default, dan menambahkan konten yang dihasilkan untuk membuat + saat detail ditutup dan -
ketika detailnya terbuka.
Jika Anda ingin blok detail terbuka secara default, sertakan atribut open pada tag <details> pembuka. Anda juga dapat menambahkan ruang
di antara setiap dialog dan mentransisikan rotasi penanda yang dibuat dengan konten yang dihasilkan untuk meningkatkan tampilannya:
Cara penanganan error
Jika Anda tidak menyertakan <summary>, browser akan membuatnya untuk Anda: dengan penanda dan kata "detail". Ringkasan ini
adalah bagian dari shadow root, sehingga gaya ringkasan CSS penulis tidak akan diterapkan. Sayangnya, Safari tidak menyertakan
detailnya dalam urutan fokus keyboard.
Jika Anda menyertakan <summary>, tetapi bukan elemen pertama di <details>, browser akan tetap menampilkan ringkasan
sebagaimana mestinya. Ringkasan ini juga tidak akan gagal jika Anda menyertakan tautan, label, atau elemen interaktif lainnya dalam ringkasan, tetapi {i>browser<i}
menangani konten interaktif dalam konten interaktif secara berbeda. Misalnya, jika Anda menyertakan tautan dalam ringkasan, beberapa browser
akan menambahkan ringkasan dan tautan ke urutan tab {i>default<i}, tetapi {i>browser<i} lain tidak akan berfokus pada tautan secara {i>default<i}.
Jika Anda mengklik <label> yang disarangkan di dalam <summary>, beberapa browser akan memberikan fokus pada kontrol formulir terkait; browser lain
akan memberikan fokus pada kontrol formulir dan mengalihkan <details> menjadi terbuka atau tertutup.
Antarmuka HTMLDetailsElement
Seperti semua elemen HTML, HTMLDetailsElement mewarisi semua
properti, metode, dan peristiwa dari HTMLElement, lalu menambahkan
Properti instance open dan toggle
peristiwa. Properti HTMLDetailsElement.open adalah boolean
yang mencerminkan atribut HTML open, yang menunjukkan
apakah konten elemen (tidak termasuk <summary>) akan ditampilkan kepada pengguna atau tidak. Peristiwa tombol diaktifkan
saat elemen <details> dialihkan menjadi terbuka atau tertutup. Anda dapat memproses peristiwa ini menggunakan addEventListener().
Jika Anda ingin menulis skrip untuk menutup detail yang dibuka saat pengguna membuka detail lainnya, hapus atribut buka
menggunakan removeAttribute("open"):
Ini adalah satu-satunya contoh yang menggunakan JavaScript. Anda mungkin tidak memerlukan JavaScript kecuali untuk fungsi penutupan server membuka widget pengungkapan.
Ingat, <details> dan <summary> dapat memiliki banyak gaya dan bahkan dapat digunakan untuk membuat tips alat.
Namun, jika Anda akan menggunakan elemen semantik ini untuk kasus penggunaan ketika semantik native tidak cocok, selalu pastikan Anda mempertahankan aksesibilitas.
Sebagian besar HTML dapat diakses secara default. Tugas kami sebagai developer adalah memastikan konten kami tetap dapat diakses.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang detail dan ringkasan.
<summary> harus menjadi turunan pertama dari elemen yang mana?
<p><details><fieldset>