Bootstrap Accordion

Web siteniz için hazırladığımız özgün ve SEO uyumlu içerik serimize, kullanıcı deneyimini (UX) iyileştiren ve sayfa düzenini inanılmaz derecede rahatlatan bir diğer önemli bileşen ile devam ediyoruz: Bootstrap Accordion (Akordeon).

Bir web sitesinde “Sıkça Sorulan Sorular (SSS/FAQ)”, uzun ürün açıklamaları veya adım adım kullanım kılavuzları gibi yoğun metin barındıran bölümler olabilir. Bu kadar fazla metni alt alta listelemek, ziyaretçinin sayfayı bitmek bilmeyen bir şekilde aşağı kaydırmasına (scroll fatigue) neden olur. Arama motorları (Google) ve kullanıcılar, karmaşık sayfalardan hoşlanmaz. İşte bu noktada Akordeon menüler devreye girer. Başlıklara tıklayarak içeriğin aşağı doğru kayarak açılmasını ve tekrar tıklandığında kapanmasını sağlayan bu yapı, sayfada muazzam bir yer tasarrufu sağlar.

Bu rehberde, Bootstrap 5 ile Akordeon yapısının nasıl kurulduğunu, eski sürümlere göre nelerin değiştiğini ve bu bileşeni SEO’ya uygun, erişilebilir (accessibility) bir şekilde projenize nasıl entegre edeceğinizi sıfırdan, bol örnekle öğreneceğiz.

1. Bootstrap 5 ile Akordeonlarda Neler Değişti?

Eğer daha önce Bootstrap 4 kullandıysanız, akordeon yapmak için “Kart” (Card) bileşenlerini ( .card, .card-header vb.) iç içe geçirip karmaşık bir yapı kurmanız gerektiğini hatırlarsınız.

Bootstrap 5 ile birlikte bu zorluk tamamen ortadan kalktı! Bootstrap 5, eski kart tabanlı akordeon yapısını tamamen rafa kaldırarak, kullanımı çok daha kolay ve yepyeni, bağımsız bir Accordion bileşeni tanıttı.

Ayrıca, Bootstrap 5’in devrim niteliğindeki güncellemelerinden biri olan jQuery bağımlılığının kaldırılması, akordeon bileşeni için de geçerlidir. Artık açılma ve kapanma animasyonları tamamen Saf (Vanilla) JavaScript ile çalışır. Bu da sayfa yüklenme hızınızı (Page Speed) ve dolayısıyla SEO skorunuzu (Core Web Vitals) doğrudan olumlu etkiler.

Önemli bir diğer detay ise, JavaScript tetikleyicileri olan veri niteliklerinin (data attributes) değişmesidir. Diğer kütüphanelerle çakışmayı önlemek için artık data-toggle yerine data-bs-toggle; data-target yerine data-bs-target kullanılmaktadır.

2. Temel Akordeon (Accordion) Anatomisi ve Sınıfları

Bir Bootstrap 5 akordeonu oluşturmak için sadece birkaç HTML sınıfını ve “collapse” (daraltma) mantığını bilmeniz yeterlidir. Kusursuz bir akordeon şu hiyerarşiyle kurulur:

• .accordion: Tüm akordeon grubunu saran en dış kapsayıcıdır. Bu elemana benzersiz bir id (Örn: id="faqAccordion") vermek, içindeki sekmelerin birbiriyle uyumlu çalışması için şarttır.
• .accordion-item: Akordeonun her bir sekmesini (başlık + içerik) temsil eden kutudur.
• .accordion-header: Tıklanabilir butonun kapsayıcısıdır. SEO hiyerarşisini bozmamak adına genellikle <h2> veya <h3> etiketleriyle kullanılır.
• .accordion-button: Kullanıcının tıkladığı asıl butondur. Kapalı durumdayken otomatik olarak .collapsed sınıfını alır.
• .accordion-collapse: İçeriği saran ve gizleyip/gösteren asıl alandır. collapse sınıfı kapalı olduğunu, collapse show ise açık olduğunu belirtir.
• .accordion-body: Tıklanınca açılan metnin, resmin veya formun eklendiği asıl içerik alanıdır.

3. Örnek 1: Klasik Bir Sıkça Sorulan Sorular (SSS) Akordeonu

Aşağıdaki örnekte, bir tanesi varsayılan olarak açık gelen, diğerine tıklandığında ise bir öncekini otomatik olarak kapatan klasik bir akordeon yapısını görüyoruz.

Buradaki kritik nokta data-bs-parent="#sssAkordeon" niteliğidir. Bu kod, açılan sekmenin hangi ana gruba ait olduğunu belirtir ve biri açıldığında diğerinin otomatik kapanmasını sağlar.

<div class="accordion" id="sssAkordeon">

  <!-- 1. Akordeon Öğesi (Varsayılan Olarak Açık) -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="baslikBir">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#icerikBir" aria-expanded="true" aria-controls="icerikBir">
        Bootstrap 5 ücretsiz mi?
      </button>
    </h2>
    <div id="icerikBir" class="accordion-collapse collapse show" aria-labelledby="baslikBir" data-bs-parent="#sssAkordeon">
      <div class="accordion-body">
        <strong>Evet, Bootstrap 5 tamamen ücretsizdir.</strong> Açık kaynaklı (open-source) bir kütüphane olan Bootstrap, MIT lisansına sahiptir. İstediğiniz tüm ticari veya kişisel projelerde rahatlıkla kullanabilirsiniz.
      </div>
    </div>
  </div>

  <!-- 2. Akordeon Öğesi (Varsayılan Olarak Kapalı) -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="baslikIki">
      <!-- Kapalı başlaması için butona 'collapsed' sınıfı eklenir -->
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#icerikIki" aria-expanded="false" aria-controls="icerikIki">
        Akordeonlar SEO için yararlı mı?
      </button>
    </h2>
    <div id="icerikIki" class="accordion-collapse collapse" aria-labelledby="baslikIki" data-bs-parent="#sssAkordeon">
      <div class="accordion-body">
        Kullanıcı deneyimini (UX) artırdığı ve sayfayı düzenli tuttuğu için <strong>SEO açısından oldukça yararlıdır.</strong> Google, gizli olan bu metinleri sorunsuz bir şekilde okur, dizine ekler ve arama sonuçlarında (snippet olarak) gösterebilir.
      </div>
    </div>
  </div>

</div>

(Erişilebilirlik – A11y Notu: Kod içindeki aria-expanded ve aria-controls nitelikleri, ekran okuyucu kullanan görme engelli ziyaretçilerin menünün açık mı kapalı mı olduğunu anlaması için hayati öneme sahiptir.)

4. Örnek 2: Kenarlıksız (Flush) Akordeon Görünümü

Eğer akordeonunuzu beyaz bir arka planın ortasına değil de, bir kenar çubuğunun (sidebar) içine veya geniş bir kutunun içine yerleştirecekseniz, standart akordeonun dışındaki kalın çizgiler (border) ve yuvarlak köşeler çirkin durabilir.

Bootstrap 5 bunun için harika bir varyasyon sunar: .accordion-flush. Ana kapsayıcıya bu sınıfı eklediğinizde, akordeonun dış kenarlıkları ve yuvarlak köşeleri silinir; böylece akordeon, içine konulduğu alanın kenarlarına uçtan uca (edge-to-edge) kusursuzca yapışır.

<!-- Dış kenarlıkları kaldıran .accordion-flush sınıfı eklendi -->
<div class="accordion accordion-flush" id="flushAkordeon">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flushBaslikBir">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flushIcerikBir" aria-expanded="false" aria-controls="flushIcerikBir">
        Siparişimi Nasıl Takip Ederim?
      </button>
    </h2>
    <div id="flushIcerikBir" class="accordion-collapse collapse" aria-labelledby="flushBaslikBir" data-bs-parent="#flushAkordeon">
      <div class="accordion-body">
        Hesabım > Siparişlerim sekmesinden kargo takip numaranıza ulaşabilirsiniz.
      </div>
    </div>
  </div>
  <!-- Diğer akordeon öğeleri buraya eklenebilir... -->
</div>

5. Örnek 3: Her Zaman Açık Kalabilen (Always Open) Akordeonlar

Bazen kullanıcıların bir sekmedeki bilgiyi okurken diğer sekmeyi de referans olarak açık tutmasını isteyebilirsiniz. Standart akordeon davranışında biri açılınca diğeri kapanır.

Bunu iptal etmek ve kullanıcının dilediği kadar sekmeyi aynı anda açık tutabilmesini sağlamak inanılmaz derecede basittir. Yapmanız gereken tek şey, .accordion-collapse kapsayıcılarının içindeki data-bs-parent niteliğini koddan silmektir. Artık her bir sekme sadece kendi içindeki bağımsız bir açılır-kapanır (collapse) panel gibi davranacaktır.

<div class="accordion" id="herZamanAcik">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelBir" aria-expanded="true">
        Panel 1 (Bağımsız)
      </button>
    </h2>
    <!-- data-bs-parent niteliği silindi -->
    <div id="panelBir" class="accordion-collapse collapse show">
      <div class="accordion-body">Bu panel diğerlerinden bağımsız açılıp kapanır.</div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelIki" aria-expanded="false">
        Panel 2 (Bağımsız)
      </button>
    </h2>
    <!-- data-bs-parent niteliği silindi -->
    <div id="panelIki" class="accordion-collapse collapse">
      <div class="accordion-body">Bu panel açıldığında Panel 1 kapanmak zorunda kalmaz. İkisi de aynı anda ekranda açık durabilir.</div>
    </div>
  </div>
</div>

6. İleri Seviye: Akordeonları CSS Değişkenleri ile Özelleştirmek

Bootstrap 5’in v5.2.0 ve sonrası güncellemeleriyle birlikte tüm bileşenler CSS Değişkenleri (CSS Variables) altyapısına geçirilmiştir. Bu sayede akordeon bileşeninin rengini, ok ikonunu (caret) veya yuvarlak köşelerini değiştirmek için uzun CSS seçicileri (selectors) yazmanıza gerek kalmaz.

Örneğin, HTML dosyanızdaki özel CSS’nize sadece aşağıdaki değişkenleri yazarak akordeon butonunun arka planını veya tıklanınca (focus) beliren mavi çerçeveyi markanızın kurumsal rengine çevirebilirsiniz:

.accordion {
  /* Tıklanınca beliren buton rengi */
  --bs-accordion-active-bg: #e2e8f0;
  /* Tıklanınca beliren yazı rengi */
  --bs-accordion-active-color: #0d6efd;
  /* Kutuların köşe yuvarlaklığı */
  --bs-accordion-border-radius: 0.5rem;
}

Ayrıca Bootstrap 5, butonun sağ tarafında yer alan ok (caret) simgelerini birer SVG arka plan resmi (background-image) olarak entegre eder. İsterseniz --bs-accordion-btn-icon CSS değişkeninin içine kendi özel SVG kodunuzu yazarak bu oku bir “+” (artı) işaretine bile çevirebilirsiniz.

Özet ve SEO Tavsiyeleri

Bootstrap 5 Accordion (Akordeon) bileşeni, modern web sitelerinde içerik düzenlemenin en şık ve hafif yoludur. Uzun ve yorucu makalelerinizi, teknik özellikleri veya Sıkça Sorulan Soruları (SSS) bu bileşenle bölümlere ayırmak; ziyaretçinizin sitenizde sıkılmadan daha uzun süre vakit geçirmesini sağlar (Düşük Bounce Rate). Üstelik Bootstrap 5’in jQuery içermeyen hızlı altyapısı ve data-bs-* tetikleyicileri sayesinde sayfalarınız ışık hızında yüklenir.

HTML sayfalarınızda .accordion ve .accordion-flush gibi bu kolay sınıfları kullanarak hem kullanıcılara harika bir arayüz (UI) sunabilir, hem de arama motoru botlarının sitenizi çok daha temiz ve anlamsal (semantik) bir şekilde taramasını garantileyebilirsiniz. Şimdi öğrendiğiniz bu kod bloklarını kendi projenize kopyalayarak test etmeye başlayın!