Özel Akordeon

Aynı name öğesine sahip birden fazla <details> öğesiyle özel bir akordeon oluşturun.

Bramus

Akordeon

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.

Demo: HTML ve CSS ile Accordion.

Özel akordeon

Tarayıcı Desteği

• . 120)
• . 120)
• . 130
• . 17,2

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

Bunu web üzerinde gerçekleştirmek için artık <details> öğelerine bir name özelliği ekleyebilirsiniz. Bu özellik kullanıldığında, aynı name değerine sahip birden fazla <details> öğesi anlamsal bir grup oluşturur ve bunlar ö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>

.

Demo: HTML ve CSS ile özel akordeon.

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

Demo: HTML ve CSS ile birden çok özel akordeon.

Özel bir akordeonun parçası olan <details> öğelerinin kardeş olması gerekmediğini unutmayın. Bunlar belgede dağınık hâlde bulunabilir. Bunları gruplandıran, DOM sırası değil name özelliğidir.

Özel akordeonu çoklu doldurun

Aşağıdaki JavaScript'te, özel akordeonun davranışına çoklu dolgu uygulanabilir. Kod, <details> öğesinin toggle etkinliğini temel alı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. Bu, aşamalı geliştirme açısından kabul edilebilir bir davranıştır.