Temukan cara kerja detail dan elemen ringkasan yang sangat berguna, serta tempat penggunaannya.
Widget pengungkapan adalah kontrol antarmuka pengguna yang menyembunyikan dan menampilkan konten. Jika Anda membaca ini di web.dev, dan area pandang Anda kurang dari 106 ems, mengklik "Pada halaman ini" di atas paragraf ini akan membuka daftar isi untuk bagian ini. Jika Anda tidak melihatnya, ciutkan browser untuk melihat navigasi daftar isi di halaman ini sebagai widget pengungkapan.
Antarmuka pengguna grafis akordeon adalah serangkaian widget pengungkapan yang ditumpuk secara vertikal. Kasus penggunaan umum untuk UI akordeon adalah halaman Pertanyaan Umum (FAQ) di banyak situs. FAQ akordeon berisi daftar pertanyaan yang terlihat; mengklik pertanyaan akan memperluas, atau "mengungkapkan", jawaban atas pertanyaan tersebut.
jQuery telah menyertakan pola UI akordeon sejak setidaknya tahun 2009. Solusi asli akordeon tanpa JavaScript
termasuk membuat setiap pertanyaan FAQ menjadi <label> diikuti dengan tanda centang yang diberi label, lalu menampilkan jawaban <div>
saat tanda centang dicentang. CSS-nya tampak seperti ini:
#FAQ [type="checkbox"] + div.answer {
/* all the answer styles */
display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
display: block;
}
Mengapa harus sejarah? Widget pengungkapan, seperti akordeon, tanpa JavaScript atau peretasan kontrol formulir, adalah tambahan yang relatif baru; elemen <details> dan <summary> baru didukung sepenuhnya di semua browser modern sejak Januari 2020. Kini Anda dapat membuat widget pengungkapan yang berfungsi, meskipun kurang
menarik, menggunakan HTML semantik saja. Anda hanya memerlukan elemen <details> dan <summary>: keduanya merupakan cara bawaan untuk menangani
konten yang diperluas dan diciutkan. Saat pengguna mengklik atau mengetuk <summary>, atau melepaskan tombol Enter saat
<summary> sedang difokuskan, konten dari <details> induk akan beralih menjadi terlihat.
Seperti semua konten semantik, Anda dapat secara bertahap meningkatkan kualitas fitur dan tampilan default. Dalam hal ini, sedikit CSS telah ditambahkan, tetapi tidak ada yang lain:
Anda akan mencatat, Codepens ini tidak berisi JavaScript.
Mengaktifkan/menonaktifkan visibilitas: atribut open
Elemen <details> adalah penampung widget pengungkapan. <summary> adalah ringkasan atau legenda untuk <details> induknya. Ringkasan
selalu ditampilkan, yang berfungsi sebagai tombol yang mengalihkan tampilan konten induk lainnya. Berinteraksi
dengan <summary> akan mengalihkan tampilan saudara ringkasan berlabel sendiri dengan mengalihkan atribut open elemen <details>.
Atribut open adalah atribut boolean. Jika ada, terlepas dari nilai atau ketiadaannya, hal ini menunjukkan bahwa semua konten <details>
ditampilkan kepada pengguna. Jika atribut open tidak ada, hanya konten <summary> yang akan ditampilkan.
Karena atribut open ditambahkan dan dihapus secara otomatis saat pengguna berinteraksi dengan kontrol, atribut tersebut dapat digunakan dalam 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
dalam HTML berarti semua <details> akan diciutkan, atau ditutup, dan hanya judul ringkasan yang terlihat saat halaman dimuat;
setiap judul menjadi pembuka untuk konten lainnya di <details> induk. Jika Anda menyertakan atribut open di HTML, <details>
akan merender yang diperluas, dengan konten yang terlihat, saat halaman dimuat.
Konten tersembunyi dalam status yang diciutkan dapat ditelusuri di beberapa browser, tetapi tidak di browser lainnya, meskipun konten yang diciutkan bukan bagian dari DOM. Jika Anda melakukan penelusuran di Edge atau Chrome, detail yang berisi istilah penelusuran akan diperluas untuk menampilkan kemunculannya. Perilaku ini tidak direplikasi di Firefox atau Safari.
<summary> harus menjadi turunan pertama elemen <details>, yang mewakili ringkasan, teks, atau legenda untuk sisa
konten elemen <details> induk tempat elemen tersebut disusun bertingkat. Konten elemen <summary> dapat berupa konten judul, teks biasa, atau HTML yang dapat digunakan dalam paragraf.
Mengaktifkan/menonaktifkan penanda ringkasan
Pada dua Codepens sebelumnya, Anda akan mencatat panah ke sisi inline-start
ringkasan. Widget pengungkapan biasanya ditampilkan di layar menggunakan segitiga kecil yang berputar (atau diputar)
untuk menunjukkan status terbuka/tertutup, dengan label di samping segitiga. Konten elemen <summary> melabeli widget pengungkapan.
Panah yang berputar di bagian atas setiap bagian adalah ::marker yang ditetapkan pada
elemen <summary>. Seperti item daftar, elemen <summary> mendukung properti singkatan list-style
dan properti longhand-nya, 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. Elemen semu
::marker hanya menerima gaya dalam jumlah terbatas. Menghapus
::marker dan menggantinya dengan ::before yang lebih mudah ditata gayanya adalah
praktik umum, dengan gaya CSS sedikit mengubah gaya konten yang dihasilkan berdasarkan ada (atau tidak adanya)
atribut terbuka. Anda dapat menghapus ikon widget pengungkapan dengan menetapkan list-style: none atau menetapkan konten penanda ke none, tetapi selalu menyertakan indikator visual untuk memberi tahu pengguna yang melihat bahwa konten ringkasan adalah tombol yang akan menampilkan dan menyembunyikan konten setelah diaktifkan.
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 - saat detailnya terbuka.
Jika Anda ingin blok detail terbuka secara default, sertakan atribut open pada tag <details> pembuka. Anda juga dapat menambahkan spasi 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 membuatkannya untuk Anda: dengan penanda dan kata "detail". Ringkasan ini
adalah bagian dari shadow root, sehingga tidak akan menerapkan gaya ringkasan CSS penulis. Sayangnya, Safari tidak menyertakan
detail dalam urutan fokus keyboard.
Jika Anda menyertakan <summary>, tetapi bukan elemen pertama dalam <details>, browser tetap akan menampilkan ringkasan
sebagaimana mestinya. Ringkasan ini juga tidak akan gagal jika Anda menyertakan link, label, atau elemen interaktif lainnya dalam ringkasan, tetapi browser menangani konten interaktif dalam konten interaktif secara berbeda. Misalnya, jika Anda menyertakan link dalam ringkasan, beberapa browser akan menambahkan ringkasan dan link ke urutan tab default, tetapi browser lain tidak akan berfokus pada link secara default.
Jika Anda mengklik <label> yang disusun bertingkat di <summary>, beberapa browser akan memberikan fokus ke kontrol formulir yang terkait; browser lain
akan memberikan fokus pada kontrol formulir dan mengalihkan <details> terbuka atau tertutup.
Antarmuka HTMLDetailsElement
Seperti semua elemen HTML, HTMLDetailsElement mewarisi semua
properti, metode, dan peristiwa dari HTMLElement, dan menambahkan
properti instance open dan peristiwa
toggle. Properti HTMLDetailsElement.open adalah nilai 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 ditutup. Anda dapat memproses peristiwa ini menggunakan addEventListener().
Jika Anda ingin menulis skrip untuk menutup detail yang terbuka saat pengguna membuka detail lainnya, hapus atribut terbuka tersebut menggunakan removeAttribute("open"):
Ini adalah satu-satunya contoh penggunaan JavaScript. Anda mungkin tidak memerlukan JavaScript, kecuali untuk fungsi penutupan widget pengungkapan lainnya yang terbuka.
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 {i>default<i}. 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>