Bu sayfa, Cloud Translation API ile çevrilmiştir.

Ö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ş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ştirir ve genellikle birlikte olduklarını belirtmek için görsel olarak gruplandırırsınız.

Demo: HTML ve CSS ile akordeon.

Özel akordeon

Browser Support

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>

Demo: HTML ve CSS ile özel akordeon.

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.

Demo: HTML ve CSS ile birden fazla özel akordeon.

Ö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 akordiyonu 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 polyfill kodu hiçbir şey yapmaz. İlerlemeli iyileştirme açısından bu kabul edilebilir bir davranıştır.