Özel Akordeon

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

Bramus

Akordeon

Web'de yaygın olarak kullanılan bir kullanıcı arayüzü deseni akordeon bileşenidir. Bu, içeriklerini göstermek (veya gizlemek) için tek tek genişletilebilen (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ştirip genellikle birbirlerine ait olduklarını belirtmek için görsel olarak gruplandırırsınız.

Demo: HTML ve CSS ile akordeon.

Özel akordeon

Tarayıcı Desteği

  • 120
  • 120
  • x
  • 17.2

Akordeon deseninin bir varyasyonu, açıklama widget'larından yalnızca birinin aynı anda açılabileceği özel akordeondur.

Bunu web'de elde etmek için şimdi <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 özel bir akordeon olarak 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>
Demo: HTML ve CSS ile özel akordeon.

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

Demo: HTML ve CSS ile çok sayıda özel akordeon.

Özel bir akordeonun parçası olan <details> öğelerinin her zaman kardeş olmaları gerekmediğini unutmayın. Bunlar dokümanın farklı yerlerine dağılmış olabilir. Bunları gruplayan özellik, kullanıcıların DOM sıraları değil, name özelliğidir.

Özel akordeonu çoklu dolgu yapın

Aşağıdaki JavaScript ile özel akordeonun davranışını çoklu doldurmak mümkündür. Kod, <details> öğesinin toggle etkinliğine dayanı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 hiçbir şey yapmaz. Progresif geliştirme açısından bu kabul edilebilir bir davranıştır.