details ve summary elementleri ne sağlar?

Question

Accepted Answer

`

` ve `

` **native disclosure widget** oluşturur — genişletilebilir/daraltılabilir bir bölüm — **JavaScript olmadan**. Tarayıcı, geçiş, klavye desteği ve erişilebilirliği sizin için yönetir. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** tıklanabilir etikettir (ilk alt öğe). - Ondan sonraki her şey daraltılabilir içeriktir. - Özete tıklamak açık/kapalı durumunu değiştirir — doğal olarak klavye erişilebilir (Enter/Space) ve ekran okuyucular tarafından doğru şekilde duyurulur. ## Varsayılan Olarak Açık & Durumu Algılama ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## İşaretçiyi Şekillendirme ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Gerçek Kullanım Durumları SSS akordiyonları, "daha fazla göster" bölümleri, daraltılabilir yan çubuklar, spoiler metni, genişletilebilir tablo satırları. Daha önce, her akordiyonun erişilebilirlik için JavaScript artı ARIA bağlantısı gerekliydi — şimdi sadece iki anlamsal etikettir. ## Neden önemli `

`/`

` size erişilebilir, klavye dostu daraltılabilir içerik sağlar; JS olmadan ve manuel ARIA olmadan — platformu kullanmanın mükemmel bir örneği. Özel bir akordiyonu oluşturmadan önce SSS'ler ve "daha fazla göster" desenleri için buna başvurun.