Dijital Çözümlerle Fark Yaratın

 

Hayalinizdeki projeleri gerçeğe dönüştürüyoruz.

 

Daha Fazlası İçin Takipte Kalın
Github Linkedin-in Instagram

JavaScript’siz Dinamik Web Deneyimi: Saf CSS ile Akordeon Yapımı

> Blog > Yazılım Geliştirme > JavaScript’siz Dinamik Web Deneyimi: Saf CSS ile Akordeon Yapımı
Post By Ardaeren
Published 10.01.2026

Web geliştirmede, kullanıcı deneyimini zenginleştirmek ve içeriği daha düzenli sunmak için sıklıkla başvurduğumuz etkileşimli bileşenlerden biri akordeonlardır. Geleneksel olarak JavaScript ile hayat bulan bu yapılar, modern CSS’in gelişen yetenekleri sayesinde artık tamamen stil sayfalarıyla da inşa edilebiliyor. Bu, hem sayfa yükleme sürelerini optimize etme hem de geliştirme sürecini basitleştirme açısından önemli avantajlar sunuyor. Bu yazıda, herhangi bir JavaScript kodu kullanmadan, sadece CSS’in gücüyle nasıl şık ve işlevsel bir akordeon oluşturulabileceğini adım adım inceleyeceğiz.

Neden Sadece CSS ile Akordeon Tercih Edilmeli?

Birçok geliştirici için JavaScript, dinamik web içeriğinin vazgeçilmez bir parçasıdır. Ancak, basit etkileşimler için dahi JavaScript kullanmak, bazen gereksiz bir yük oluşturabilir. Saf CSS ile akordeon oluşturmanın sunduğu başlıca avantajlar şunlardır:

  • Performans Artışı: Daha az JavaScript kodu, daha küçük dosya boyutları ve dolayısıyla daha hızlı sayfa yükleme anlamına gelir. Bu, özellikle mobil cihazlarda kullanıcı deneyimini doğrudan etkileyen kritik bir faktördür.
  • Geliştirme ve Bakım Kolaylığı: Sadece HTML ve CSS ile çalışmak, kod tabanını basitleştirir. Bu da hataların azalmasına, daha kolay bakım yapılmasına ve projenin genel karmaşıklığının düşmesine yardımcı olur.
  • Tarayıcı Uyumluluğu: Kullanılan CSS özellikleri (:checked, kardeş seçiciler) modern tarayıcıların büyük çoğunluğu tarafından desteklenmektedir. Bu, geniş bir kullanıcı kitlesine ulaşmanızı sağlar.
  • Erişilebilirlik: Doğru HTML semantiği ve label etiketi kullanımıyla, klavye navigasyonu ve ekran okuyucular için doğal bir erişilebilirlik düzeyi sağlanabilir.

Temel Prensip: Gizli Checkbox ve CSS Seçiciler

CSS ile akordeon yapımının arkasındaki temel mantık oldukça zekice ve basittir: HTML’deki bir input elementinin checked (işaretli) durumunu CSS ile yakalayabilmek. Bu yöntemde, bir checkbox tipi input elementi kullanılır ve bu elementin görünürlüğü genellikle gizlenir. Kullanıcı, akordeon başlığına tıkladığında, aslında bu gizli checkbox‘ı işaretlemiş olur.

Nasıl Çalışır?

Her bir akordeon öğesi için bir input type="checkbox" elementi ve bu input‘a bağlı bir label etiketi bulunur. label, akordeon başlığı olarak görev yapar ve for niteliği ile ilgili checkbox‘ın id‘sine bağlanır. Bu sayede, kullanıcı label‘a tıkladığında, tarayıcı otomatik olarak ilişkili checkbox‘ın işaretli durumunu değiştirir.

CSS tarafında ise, :checked sözde sınıfı ve kardeş seçiciler (+ bitişik kardeş veya ~ genel kardeş) devreye girer. Örneğin, input[type="checkbox"]:checked ~ .accordion-content seçicisi, işaretli bir checkbox‘tan sonra gelen .accordion-content sınıfına sahip elementi hedefleyerek onun stilini değiştirmemizi sağlar. Başlangıçta gizli olan içerik alanı, checkbox işaretlendiğinde görünür hale getirilir ve genellikle bir geçiş (transition) efekti ile daha yumuşak bir açılış sağlanır.

Adım Adım CSS Akordeon Yapımı

Şimdi bu prensibi somut bir örneğe dönüştürelim. İşte temel HTML ve CSS yapısı:

HTML Yapısı

Her bir akordeon öğesi için benzersiz bir id‘ye sahip bir checkbox, bu checkbox‘a bağlı bir label ve akordeon içeriğini barındıracak bir div (veya başka bir blok element) kullanırız. Örnek bir yapı şöyle olabilir:

<div class="accordion-item">
  <input type="checkbox" id="toggle1" class="accordion-toggle">
  <label for="toggle1" class="accordion-header">Bölüm Başlığı 1</label>
  <div class="accordion-content">
    <p>Bu, birinci akordeon bölümünün içeriğidir.</p>
  </div>
</div>

<div class="accordion-item">
  <input type="checkbox" id="toggle2" class="accordion-toggle">
  <label for="toggle2" class="accordion-header">Bölüm Başlığı 2</label>
  <div class="accordion-content">
    <p>Bu, ikinci akordeon bölümünün içeriğidir.</p>
  </div>
</div>

CSS Stilleri

Şimdi sıra geldi bu HTML yapısını stilize etmeye ve dinamik hale getirmeye. Temel CSS kuralları şunları içerir:

.accordion-toggle {
  display: none; /* Checkbox'ı gizle */
}

.accordion-header {
  cursor: pointer;
  padding: 15px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
  user-select: none;
}

.accordion-header:hover {
  background-color: #e0e0e0;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #fff;
  padding: 0 15px;
}

.accordion-toggle:checked + .accordion-header {
  background-color: #e9e9e9; /* Başlık açıldığında arka plan rengi */
}

.accordion-toggle:checked ~ .accordion-content {
  max-height: 500px; /* İçeriğin açıldığında alacağı maksimum yükseklik */
  padding: 15px; /* İçerik açıldığında padding ekle */
}

Burada kilit nokta, .accordion-content için başlangıçta max-height: 0; ve overflow: hidden; kullanmak. checkbox işaretlendiğinde (:checked), max-height değerini içeriğin sığacağından emin olduğunuz yüksek bir değere (örneğin 500px veya 1000px) çıkararak içeriğin görünmesini sağlıyoruz. transition özelliği ise bu değişimin yumuşak bir animasyonla gerçekleşmesini sağlar.

Uygulamalı Örnek ve Video Desteği

Bu konuyu daha derinlemesine anlamak ve görsel olarak takip etmek isteyenler için, Tayfun Erbilen’in hazırladığı “CSS ile Accordion İçerik Yapımı” başlıklı video harika bir kaynak. Videoda, bu tekniğin adım adım nasıl uygulanabileceği detaylı bir şekilde anlatılıyor.

Ayrıca, bu tekniğin çalışan bir demosunu görmek ve kodlarını incelemek için CodePen üzerinde yayınlanan örneği ziyaret edebilirsiniz. Bu interaktif demo, hem HTML hem de CSS kodlarının nasıl bir araya geldiğini ve nihai çıktının neye benzediğini anında görmenizi sağlar.

See the Pen Accordion Content with Pure CSS by Tayfun Erbilen (@tayfunerbilen) on CodePen.7393

CSS Akordeonun Avantajları ve Sınırlamaları

Her teknikte olduğu gibi, saf CSS akordeonların da kendine özgü avantajları ve bazı sınırlamaları vardır:

Avantajlar:

  • Hafif ve Hızlı: JavaScript kütüphanelerine veya çerçevelerine bağımlılık olmadan çalışır.
  • SEO Dostu: İçerik her zaman HTML’de bulunur ve arama motorları tarafından kolayca indekslenebilir.
  • Çapraz Tarayıcı Uyumluluğu: Temel CSS özellikleri iyi desteklenir.
  • Temiz Kod: Daha az karmaşık bir yapı sunar.

Sınırlamalar:

  • Karmaşık Etkileşimler: Bir akordeon öğesi açıldığında diğerlerini otomatik olarak kapatma gibi daha gelişmiş etkileşimler için hala JavaScript gerekebilir. CSS ile bunu yapmak, her öğe için ayrı ayrı ve karmaşık seçicilerle mümkün olsa da, pratik olmayabilir.
  • Animasyon Kısıtlamaları: max-height tabanlı animasyonlar, içeriğin tam yüksekliğini bilmediğinizde bazen ani geçişlere neden olabilir. Daha akıcı ve kontrol edilebilir animasyonlar için JavaScript daha fazla esneklik sunar.
  • Erişilebilirlik İyileştirmeleri: Temel erişilebilirlik sağlansa da, ARIA nitelikleri (aria-expanded, aria-controls) gibi daha gelişmiş erişilebilirlik özelliklerini eklemek için genellikle JavaScript’e ihtiyaç duyulur.

Bu basit ama güçlü teknik, web sayfalarınıza dinamizm katarken, aynı zamanda performans ve geliştirme kolaylığı sağlar. Özellikle statik içeriklerin sunumunda veya küçük etkileşimler gerektiren durumlarda, pure CSS akordeonlar harika bir çözümdür. JavaScript’e başvurmadan, sadece işaretleme dili ve stil sayfalarıyla neler yapılabileceğini görmek, web geliştirmenin sonsuz olasılıklarını bir kez daha gözler önüne seriyor ve bizleri daha verimli, daha hızlı ve daha esnek çözümler üretmeye teşvik ediyor.

Tags