Buat akordeon eksklusif dengan beberapa elemen <details>
yang memiliki name
yang sama.
Akordeon
Pola UI yang umum di web adalah komponen akordeon. Ini adalah komponen yang terdiri dari beberapa widget pengungkapan yang dapat diluaskan (atau diciutkan) secara terpisah untuk memperlihatkan (atau menyembunyikan) kontennya.
Untuk menerapkan pola ini di web, Anda menggabungkan beberapa elemen <details>
dan biasanya mengelompokkannya secara visual untuk menunjukkan bahwa elemen-elemen tersebut saling terkait.
Akordeon eksklusif
Dukungan Browser
- 120
- 120
- x
- 17.2
Variasi pola akordeon adalah akordeon eksklusif, yang hanya memiliki satu widget pengungkapan yang dapat dibuka secara bersamaan.
Untuk melakukannya di web, kini Anda dapat menambahkan atribut name
ke elemen <details>
. Saat atribut ini digunakan, beberapa elemen <details>
yang memiliki nilai name
yang sama akan membentuk grup semantik dan akan berperilaku sebagai akordeon eksklusif. Saat Anda membuka salah satu elemen <details>
dari grup, elemen yang dibuka sebelumnya akan otomatis ditutup.
<details name="learn-css">
<summary>Welcome to Learn CSS!</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Box Model</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Selectors</summary>
<p>…</p>
</details>
Halaman dapat memiliki beberapa akordeon eksklusif. Setiap kali Anda menggunakan nilai name
baru pada elemen <details>
, grup logis baru akan dibuat.
Perhatikan bahwa elemen <details>
yang merupakan bagian dari akordeon eksklusif tidak harus bersaudara. Template ini dapat tersebar di seluruh dokumen. Atribut name
lah yang mengelompokkannya, bukan urutan DOM-nya.
Polyfill akordeon eksklusif
Dengan JavaScript berikut, Anda dapat mem-polyfill perilaku akordion eksklusif. Kode ini bergantung pada peristiwa toggle
dari elemen <details>
.
Saat elemen <details>
dengan name
terbuka, kode akan menemukan elemen <details>
lain yang terbuka dan memiliki nilai yang sama untuk atribut name
, lalu menutupnya.
document.querySelectorAll("details[name]").forEach(($details) => {
$details.addEventListener("toggle", (e) => {
const name = $details.getAttribute("name");
if (e.newState == "open") {
document
.querySelectorAll(`details[name=${name}][open]`)
.forEach(($openDetails) => {
if (!($openDetails === $details)) {
$openDetails.removeAttribute("open");
}
});
}
});
});
Beberapa versi browser lama tidak mengaktifkan peristiwa toggle
ini. Dalam browser tersebut, kode polyfill tidak akan melakukan apa pun. Dalam hal peningkatan progresif, ini adalah perilaku yang dapat diterima.