Özel Akordeon

Aynı name değerine sahip birden fazla <details> öğesi içeren özel bir akordeon oluşturun.

Bramus

Akordiyon

Web'de yaygın bir kullanıcı arayüzü kalıbı akordeon bileşenidir. Bu, içeriğini göstermek (veya gizlemek) için tek tek genişletilebilecek (veya daraltılabilen) çeşitli açıklama widget'larından oluşan bir bileşendir.

Bu kalıbı web'de uygulamak için birkaç <details> öğesini birleştirir ve genellikle birlikte olduklarını belirtmek için görsel olarak gruplandırırsınız.

Özel akordeon

Açılır düğme düzeninin bir varyasyonu, açıklama widget'larından yalnızca birinin aynı anda açılabildiği özel açılır düğme'dir.

Web'de özel bir akordeon oluşturmak için <details> öğelerine name özelliği ekleyin. Bu özellik kullanıldığında, aynı name değerine sahip birden fazla <details> öğesi bir anlamsal grup oluşturur ve özel bir akordeon gibi davranır. Gruptaki <details> öğelerinden birini açtığınızda daha önce açılmış olan öğe otomatik olarak kapanır.

<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>

Bir sayfada birden fazla özel akordeon bulunabilir. Bir <details> öğesinde her yeni name değeri kullandığınızda yeni bir mantıksal grup oluşturulur.

Özel akordeonun parçası olan <details> öğelerinin aynı ebeveyn öğeye sahip olması gerekmez. Bunlar dokümanın farklı yerlerinde olabilir. Bunları gruplandıran, DOM sıraları değil name özelliğidir.

Özel akordeonu poli doldurma

Aşağıdaki JavaScript ile özel akordeonun davranışını polyfill olarak doldurabilirsiniz. Kod, <details> öğesinin toggle etkinliğini kullanır.

name içeren bir <details> öğesi açıldığında kod, name özelliği için aynı değere sahip diğer açık <details> öğelerini bulup kapatır.

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");
          }
        });
    }
  });
});

Tarayıcıların bazı eski sürümleri bu toggle etkinliğini tetiklemez. Bu tarayıcılarda polyfill kodu hiçbir şey yapmaz. İlerlemeli iyileştirme açısından bu kabul edilebilir bir davranıştır.