Yerleşim · Accordion

Akordiyon

Uzun içeriği başlıklara böler ve her bölümü istek üzerine açar.

CSS: kararlı
JavaScript: aç ve kapat
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

HTML kodunu göster

<div class="kiris-akordiyon" data-kiris="akordiyon">
  <div class="kiris-akordiyon__bolum">
    <h3 class="kiris-akordiyon__baslik">
      <button class="kiris-akordiyon__dugme" type="button" aria-expanded="false" aria-controls="a1">Başvurum ne kadar sürede sonuçlanır?</button>
    </h3>
    <div class="kiris-akordiyon__icerik" id="a1" hidden>
      <p class="kiris-govde">Başvurular 15 iş günü içinde sonuçlanır.</p>
    </div>
  </div>
</div>

Ne zaman kullanılır

Sık sorulan sorular gibi tarama yapılan içerikte kullanın.
Kullanıcının tümünü okuması gereken içeriği gizlemeyin.

Erişilebilirlik

Her başlık bir <button> içinde durur ve aria-expanded taşır.
JavaScript çalışmazsa tüm bölümler açık kalır.
"Tümünü göster" düğmesi durumu duyurur.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 2.1.1 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, FR, IE, KR, JP, DK, DE, NO.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-accordion ile başlayan sınıflar
Davranış betiği, data-kiris="akordiyon" başlatıcısı