Özel Akordeon

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

Bramus

Akordiyon

Web'de yaygın olarak kullanılan bir kullanıcı arayüzü kalıbı, akordeon bileşenidir. Bu bileşen, içeriklerinin gösterilmesi (veya gizlenmesi) için tek tek genişletilebilen (veya daraltılabilen) çeşitli açıklama widget'larından oluşur.

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

Özel akordeon

Akordeon kalıbının bir varyasyonu, aynı anda açıklama widget'larından yalnızca birinin açılabildiği özel akordeondur.

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 önceden 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 olabilir. 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ırası değil name özelliğidir.

Özel akordeonu polidoldurma

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 çoklu dolgu kodu herhangi bir işlem yapmaz. İlerlemeli iyileştirme açısından bu kabul edilebilir bir davranıştır.