Akordeon Eksklusif

Buat akordeon eksklusif dengan beberapa elemen <details> yang memiliki name yang sama.

Bramus

Akordeon

Pola UI yang umum di web adalah komponen akordeon. Ini adalah komponen yang terdiri dari beberapa widget pengungkapan yang masing-masing dapat diperluas (atau diciutkan) untuk menampilkan (atau menyembunyikan) kontennya.

Untuk menerapkan pola ini di web, Anda menggabungkan beberapa elemen <details> dan biasanya mengelompokkannya secara visual untuk menunjukkan bahwa elemen tersebut saling terkait.

Akordeon eksklusif

Variasi pola akordeon adalah akordeon eksklusif, yang hanya memiliki salah satu widget pengungkapan yang dapat dibuka pada saat yang sama.

Untuk mencapai hal ini di web, Anda kini dapat menambahkan atribut name ke elemen <details>. Saat atribut ini digunakan, beberapa elemen <details> yang memiliki nilai name yang sama membentuk grup semantik dan elemen tersebut 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>

Sebuah halaman dapat memiliki beberapa akordeon eksklusif. Setiap kali Anda menggunakan nilai name baru pada elemen <details>, grup logis baru akan dibuat.

Perlu diketahui bahwa elemen <details> yang merupakan bagian dari akordeon eksklusif tidak harus berupa seinduk. Ikon tersebut dapat tersebar di seluruh dokumen. Atribut name yang mengelompokkannya, bukan urutan DOM-nya.

Polyfill akordeon eksklusif

Dengan JavaScript berikut, Anda dapat mem-polyfill perilaku akordeon eksklusif. Kode ini bergantung pada peristiwa toggle dari elemen <details>.

Saat elemen <details> dengan name terbuka, kode akan menemukan elemen <details> terbuka lainnya dengan nilai yang sama untuk atribut name dan 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. Di browser tersebut, kode polyfill tidak akan melakukan apa pun. Dalam hal progressive enhancement, ini adalah perilaku yang dapat diterima.