HTML Academy · Ders

PE Akordeonu Oluşturma

JavaScript olmadan çalışan, ardından geliştirilmiş bir akordeon oluşturun

PE Akordeonu Oluşturma, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Amaç: JS Olmadan Çalışan Bir Akordeon

Bir akordeonun PE sürümü yalnızca HTML kullanır — yerel <details>/<summary> öğe çifti. Paneli açıp kapatmak için summary'ye tıklayın. CSS, JS veya çerçeve olmadan çalışır: HTML'nin yerleşik bir parçasıdır.

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the markup language of the web.</p>
</details>

Yerleşik Erişilebilirlik

<summary>, odaklanabilir ve klavyeyle etkinleştirilebilir bir düğmedir (Enter/Space geçiş yapar). Ekran okuyucular genişletilmiş/daraltılmış durumu duyurur. İki HTML öğesi, özel bir React akordeonunun ARIA ve olay işleme kullanarak gerçekleştirmek için onlarca satır gerektirebileceği işlevi sağlar.

CSS ile Katmanlama

Açma-kapama üçgenini, panel iç boşluğunu ve geçişleri normal CSS ile biçimlendirin. open özniteliği durumu yansıtır; bu nedenle details[open] summary { color: blue; } yalnızca genişletildiğinde uygulanır. Görsel iyileştirme için JS gerekmez.

details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }

Açılma ve Kapanmayı Canlandırma

Varsayılan açılma/kapanma anlıktır. İçeriğin görünürlüğünü geçişli hâle getirerek veya panel yüksekliğini ölçüp max-height değerini canlandıran JS kullanarak animasyon ekleyin. Basit durumlarda ani geçiş kabul edilebilir; animasyon, CSS+JS ile kademeli olarak uygulanan bir iyileştirmedir.

JavaScript ile Geliştirme

JS, kullanışlı ek özellikler sağlayabilir: biri açıldığında diğer akordeonları kapatmak (tek-açık modu), açık durumunu localStorage içinde saklamak, geçişi canlandırmak veya hangi öğelerin genişletildiğini analiz amacıyla izlemek. Her iyileştirme tamamen ek niteliktedir.

document.querySelectorAll("details").forEach((d) => {
  d.addEventListener("toggle", () => {
    if (d.open) {
      document.querySelectorAll("details").forEach((o) => {
        if (o !== d) o.removeAttribute("open");
      });
    }
  });
});

Geçiş Olayı

<details>, açık durumu her değiştiğinde bir toggle olayı tetikler. Tıklama işleyicilerini yeniden kurmadan, kullanıcının genişletme işlemine tepki vermek için bunu kullanın. Hem fare tıklamalarıyla hem de klavyeyle etkinleştirmeyle uyumludur.

Sunucu Tarafında Durum Oluşturma

Başlangıçta açık bir akordeon oluşturmak için open özniteliğini sunucu tarafında ayarlayın: <details open>. Durum HTML içinde yer alır; böylece herhangi bir JS çalışmadan önce tarayıcı tarayıcıları ve yavaş bağlantı kullanan kullanıcılar bu duruma erişebilir.

Yerleşik Özellik Yeterli Olmadığında

Tasarım özel bir açma-kapama simgesi, canlandırılmış bir görünüm veya çok sütunlu bir panel gerektiriyorsa özel bir sürüm oluşturun; ancak mümkünse temel yapı olarak <details>/<summary> kullanın. Yerel öğeleri hiçbir şekilde kullanamıyorsanız ARIA ekleyin.

JS Olmadan Doğrulama

DevTools içinde JavaScript'i devre dışı bırakıp akordeonun hâlâ çalıştığını doğrulayın: summary'ye tıklayın, panel açılıp kapansın, odak sırası mantıklı kalsın ve klavyeyle etkinleştirme çalışsın. Bir şey bozuluyorsa JS bir iyileştirme değil, PE'yi ihlal eden bir gereksinimdir.

Yalnızca CSS ile Tek Açık

JS olmadan radyo düğmelerindeki gibi "aynı anda yalnızca biri açık" davranışı için <details> üzerinde name özniteliğini kullanın (Chrome/Safari tarafından desteklenir): tüm <details name="faq"> öğeleri durumu paylaşır; biri açıldığında diğerleri kapanır. Radyo düğmelerini andıran, yalnızca HTML kullanan bir modeldir.

Yalnızca JS Kullanan Akordeondan Geçiş

div'leri ve JS'yi <details>/<summary> ile değiştirin, biçimlendirme için CSS sınıflarını koruyun. Sonuç daha kısa HTML, JS bağımlılığının olmaması, daha iyi erişilebilirlik ve dizinlenebilir içeriktir. Çoğu JS akordeonu, kullanıcıya görünen değişiklikleri en aza indirerek PE'ye geçirilebilir.

Bilginizi Sınayın

Hiç JavaScript kullanmadan tamamen çalışan bir akordeon sağlayan HTML öğesi çifti hangisidir?

Özet

Bir PE akordeonu, temel yapı için yerel <details>/<summary> öğelerini kullanır; JS olmadan tamamen erişilebilir ve klavyeyle kullanılabilir. Görsel biçimlendirme için CSS katmanı ekleyin, animasyonlar veya tek-açık davranışı için isteğe bağlı olarak JS kullanın. JS'yi devre dışı bırakarak temel işlevin hâlâ çalıştığını doğrulayın. Yeni name özniteliği, yalnızca CSS ile tek-açık modunu bile mümkün kılar.

Sıkça Sorulan Sorular

“PE Akordeonu Oluşturma” dersi ücretsiz mi?

Evet — “PE Akordeonu Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“PE Akordeonu Oluşturma” dersinde ne öğreneceğim?

JavaScript olmadan çalışan, ardından geliştirilmiş bir akordeon oluşturun HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“PE Akordeonu Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön