HTML details ve summary: Açılır Kapanır Bölümler

Q: Bir details elementini varsayılan olarak nasıl açık yaparım?

Boolean open özelliğini ekle: . Kullanıcı açıp kapattıkça tarayıcı bu özelliği ekler ve kaldırır, böylece CSS details[open] seçicisine stil verebilir.

Q: Yalnızca bir bölümün açık olduğu bir akordeonu nasıl yaparım?

Gruptaki her elementine aynı name özelliğini ver, örneğin name="faq". Birini açmak, JavaScript olmadan o gruptaki diğerlerini kapatır.

Q: Bir details summary'deki oku nasıl kaldırır ya da değiştiririm?

summary üzerine list-style: none ayarla ve Safari için summary::-webkit-details-marker { display: none; } ekle. Sonra kendi göstergeni, örneğin summary::after ile çiz ve onu details[open] summary::after ile değiştir.

Q: Bir details elementinin açıldığını algılayabilir miyim?

Evet. elementinde toggle olayını dinle ve open özelliğini oku. JavaScript'te details.open = true ayarlamak onu açar.

details ve summary ile açılır kapanır içerik

İçeriği <details> ile sar ve en başa bir <summary> koy. Summary görünür kalır; geri kalan her şey okur ona tıklayana kadar gizlidir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>details</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <details>
    <summary>What is included in the free plan?</summary>
    <p>Five projects, community support and all the beginner courses.</p>
  </details>
</body>
</html>

Açmak için soruya, kapatmak için yeniden tıkla. Tarayıcı üçgen işareti ekler, summary'yi odaklanabilir yapar, onu Enter ya da Space ile açıp kapatır ve ekran okuyuculara açık mı kapalı mı olduğunu söyler. Hiç JavaScript yok.

<summary> yazmazsan tarayıcı onun yerine varsayılan bir etiket gösterir (İngilizcede "Details").

Varsayılan olarak açık

Boolean open özelliği içeriği baştan gösterir. Okur açıp kapattıkça tarayıcı open özelliğini ekler ve kaldırır, bu yüzden stil vermek için de tutamak odur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>open</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
    details[open] { border-color: #2563eb; }
    summary { cursor: pointer; font-weight: 600; }
  </style>
</head>
<body>
  <details open>
    <summary>Shipping</summary>
    <p>Orders ship within two working days.</p>
  </details>
  <details>
    <summary>Returns</summary>
    <p>Return any item within 30 days.</p>
  </details>
</body>
</html>

Açık kutunun details[open] seçicisinden gelen mavi bir kenarlığı var. "Returns" bölümünü aç, o da maviye döner; ikisi aynı anda açık olabilir.

Akordeon: aynı anda yalnızca biri açık

Birkaç <details> elementine aynı name değerini ver, tekli bir grup olurlar: birini açmak diğerlerini kapatır. Bu eskiden JavaScript gerektirirdi, şimdi güncel Chrome, Edge, Firefox ve Safari'de yalnızca özellikle çalışır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Accordion</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .faq { max-width: 420px; border: 1px solid #e5e7eb; border-radius: 10px; }
    .faq details + details { border-top: 1px solid #e5e7eb; }
    .faq summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
    .faq p { margin: 0; padding: 0 14px 12px; color: #374151; }
  </style>
</head>
<body>
  <div class="faq">
    <details name="faq" open>
      <summary>Is it free?</summary>
      <p>Yes, the basics are free forever.</p>
    </details>
    <details name="faq">
      <summary>Do I need to install anything?</summary>
      <p>No, everything runs in the browser.</p>
    </details>
    <details name="faq">
      <summary>Can I cancel any time?</summary>
      <p>Yes, from your account settings.</p>
    </details>
  </div>
</body>
</html>

İkinci soruyu aç, ilki kapanır. name özelliklerini kaldır, yeniden birbirinden bağımsız açılırlar. Tekli bir akordeon okurun karşılaştırmak isteyebileceği içeriği gizler, bu yüzden bölümler birbirinin alternatifi olduğunda onu, insanlar birkaçını açık isteyebileceğinde de düz <details> kullan.

İşarete stil vermek

Üçgen, summary üzerindeki bir liste işaretidir. list-style: none onu kaldırır (::-webkit-details-marker kuralı Safari'yi kapsar), bir sözde element de kendi göstergeni çizebilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom marker</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { max-width: 420px; background: #f9fafb; border-radius: 8px; margin-bottom: 8px; }
    summary {
      list-style: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 14px; font-weight: 600;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+"; font-size: 20px; color: #2563eb;
      transition: transform 0.2s;
    }
    details[open] summary::after { transform: rotate(45deg); }
    summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 8px; }
    details p { margin: 0; padding: 0 14px 12px; }
  </style>
</head>
<body>
  <details>
    <summary>How long are the lessons?</summary>
    <p>Most lessons take five to ten minutes.</p>
  </details>
  <details>
    <summary>Do I get a certificate?</summary>
    <p>Yes, when you finish a course.</p>
  </details>
</body>
</html>

Artı işareti bölüm açıldığında 45 derece dönerek bir çarpıya dönüşür. Buradaki :focus-visible çerçevesi gibi görünür bir odak stili bırak: varsayılan işareti kaldırdığında klavye kullananların güvendiği şey odak halkasıdır.

toggle olayı ve open özelliği

JavaScript details.open değerini okuyup ayarlayabilir ve toggle olayı, bir tıklama, bir tuş ya da bir script'ten kaynaklansın, her değişiklikten sonra tetiklenir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 4px 10px; margin-inline-end: 6px; }
    details { margin-top: 10px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; }
    #log { color: #16a34a; }
  </style>
</head>
<body>
  <button id="expand">Expand all</button>
  <button id="collapse">Collapse all</button>
  <details><summary>Step 1</summary><p>Create an account.</p></details>
  <details><summary>Step 2</summary><p>Pick a course.</p></details>
  <p id="log">Nothing toggled yet.</p>
  <script>
    const all = document.querySelectorAll('details');
    all.forEach((d) => d.addEventListener('toggle', () => {
      document.getElementById('log').textContent =
        d.querySelector('summary').textContent + (d.open ? ' opened' : ' closed');
    }));
    document.getElementById('expand').onclick = () => all.forEach((d) => { d.open = true; });
    document.getElementById('collapse').onclick = () => all.forEach((d) => { d.open = false; });
  </script>
</body>
</html>

"Expand all" ikisine de open ayarlar, günlük de son toggle olayını gösterir. Olay kabarcıklanmaz (bubble), bu yüzden bir üst element yerine her <details> elementini ayrı dinle.

summary içine neler girer

Bir summary metin, satır içi elementler ya da bölüm başlığı sayfanın ana hattına aitse bir başlık barındırır:

<details>
  <summary><h3>Refund policy</h3></summary>
  <p>...</p>
</details>

<summary> içinde link, buton ve form alanlarından kaçın: summary zaten bir kontroldür, bu yüzden içindeki bir kontrolü gözden kaçırmak ya da yanlışlıkla ona basmak kolaydır ve ekran okuyucular iç içe kontrolleri kötü duyurur. Etkileşimli içeriği onun yerine <details> gövdesine koy.

Sık yapılan hatalar

Bir <div> ve JavaScript ile aç kapa yapmak. <details> tıklamaları, tuşları ve ekran okuyucu durumunu zaten yönetir. Özel bir aç kapa gerçekten gerektiğinde aria-expanded olan bir button kullan.
<summary> elementini ilk sıra dışında bir yere koymak. <details> elementinin ilk çocuğu olmalı.
İşareti yerine bir şey koymadan gizlemek. Okurlara summary'nin açıldığına dair, yukarıdaki artı işareti gibi bir işaret ver.
İçeriği gizlemek için display kullanmak. Onun yerine open değerini değiştir; içeriği zorla görünür ya da gizli yapan CSS tarayıcının durumuyla çatışır.
İnsanların karşılaştırdığı içerik için tekli gruplar. name değerini yalnızca aynı anda tek bir açık bölümün mantıklı olduğu durumlarda kullan.

Sıkça Sorulan Sorular

HTML'de details ve summary ne işe yarar?

<details> bir açma kapama bileşeni oluşturur: açılıp kapanabilen bir bölüm. İlk çocuğu olan <summary> her zaman görünen etikettir; ona tıklamak (ya da odaktayken Enter veya Space'e basmak) <details> içindeki diğer her şeyi gösterir ya da gizler.

Bir details elementini varsayılan olarak nasıl açık yaparım?

Boolean open özelliğini ekle: <details open>. Kullanıcı açıp kapattıkça tarayıcı bu özelliği ekler ve kaldırır, böylece CSS details[open] seçicisine stil verebilir.

Yalnızca bir bölümün açık olduğu bir akordeonu nasıl yaparım?

Gruptaki her <details> elementine aynı name özelliğini ver, örneğin name="faq". Birini açmak, JavaScript olmadan o gruptaki diğerlerini kapatır.

Bir details summary'deki oku nasıl kaldırır ya da değiştiririm?

summary üzerine list-style: none ayarla ve Safari için summary::-webkit-details-marker { display: none; } ekle. Sonra kendi göstergeni, örneğin summary::after ile çiz ve onu details[open] summary::after ile değiştir.

Bir details elementinin açıldığını algılayabilir miyim?

Evet. <details> elementinde toggle olayını dinle ve open özelliğini oku. JavaScript'te details.open = true ayarlamak onu açar.

İlgili kavramlar