Akordeon Eksklusif

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

Bramus

Akordeon

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

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

Demo: Accordion dengan HTML dan CSS.

Accordion eksklusif

Dukungan Browser

• 120
• 120
• 130
• 17.2

Variasi pola akordeon adalah akordeon eksklusif, yang hanya memiliki satu widget pengungkapan yang dapat dibuka secara bersamaan.

Untuk membuat akordeon eksklusif di web, Anda 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 sebelumnya dibuka 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>

Demo: Accordion eksklusif dengan HTML dan CSS.

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

Demo: Beberapa akordeon eksklusif dengan HTML dan CSS.

Elemen <details> yang merupakan bagian dari akordeon eksklusif tidak harus merupakan elemen yang sama. Elemen ini dapat tersebar di seluruh dokumen. Atribut name yang mengelompokkan, bukan urutan DOM-nya.

Perhatian: Sebelum menggunakan akordeon eksklusif, pertimbangkan apakah akordeon tersebut bermanfaat atau berbahaya bagi pengguna. Meskipun penggunaan akordeon eksklusif mengurangi jumlah ruang visual yang digunakan konten, pengguna mungkin harus membuka banyak item untuk menemukan informasi. Hal ini dapat membuat pengguna yang ingin melihat beberapa item secara bersamaan merasa frustrasi.

Mengisi akordeon eksklusif dengan polyfill

Dengan JavaScript berikut, Anda dapat melakukan polyfill pada perilaku akordeon eksklusif. Kode ini mengandalkan 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 memicu peristiwa toggle ini. Di browser tersebut, kode polyfill tidak akan melakukan apa pun. Dalam hal progressive enhancement, ini adalah perilaku yang dapat diterima.