Emre

Emre

WFN Üye
Konular
1,644
Mesajlar
1,740
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 3 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
Tıklanan öğenin başka bir öğeyi göstermesi için tıklama olayını dinleyip hedef öğenin görünürlük durumunu değiştirmeniz gerekir. En küçük çalışır örnekte düğmeye click olayı bağlanır, başlangıçta gizlenen kutunun hidden özelliği değiştirilir ve düğmenin metni güncellenir. Aşağıdaki kodu tek bir HTML dosyasına kaydedip tarayıcıda açtığınızda düğmeye her tıklamada kutu görünür veya yeniden gizlenir.

HTML: 
4<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tıklayınca öğe gösterme</title>
</head>
<body>
  <button id="gosterBtn" type="button" aria-expanded="false" aria-controls="bilgiKutusu">
    Bilgiyi göster
  </button>

  <div id="bilgiKutusu" hidden>
    Bu kutu, düğmeye tıklanınca görünür.
  </div>

  <script>
    const gosterBtn = document.querySelector('#gosterBtn');
    const bilgiKutusu = document.querySelector('#bilgiKutusu');

    gosterBtn.addEventListener('click', () => {
      bilgiKutusu.hidden = !bilgiKutusu.hidden;

      const gorunuyor = !bilgiKutusu.hidden;
      gosterBtn.textContent = gorunuyor
        ? 'Bilgiyi gizle'
        : 'Bilgiyi göster';
      gosterBtn.setAttribute('aria-expanded', String(gorunuyor));
    });
  </script>
</body>
</html>

Burada gosterBtn tıklanacak düğmeyi, bilgiKutusu ise gösterilecek öğeyi temsil eder. hidden özelliği başlangıçta true durumundadır; bu nedenle kutu sayfa açıldığında görünmez. Tıklama gerçekleştiğinde bilgiKutusu.hidden = !bilgiKutusu.hidden ifadesi bu değeri tersine çevirir. Gizliyse görünür, görünürse yeniden gizlenir.

Başlangıçta gizli bir öğeyi tıklamayla göstermek​


Yalnızca bir kez gösterilecek bir içerik istiyorsanız, görünürlük durumunu tersine çevirmek yerine doğrudan hidden = false atayabilirsiniz:

HTML: 
<button id="acBtn" type="button">Açıklamayı göster</button>
<p id="aciklama" hidden>
  Bu açıklama, düğmeye basıldıktan sonra görünür.
</p>

<script>
  const acBtn = document.querySelector('#acBtn');
  const aciklama = document.querySelector('#aciklama');

  acBtn.addEventListener('click', () => {
    aciklama.hidden = false;
    acBtn.disabled = true;
  });
</script>

Bu sürümde düğmeye basıldığında paragraf görünür ve düğme devre dışı bırakılır. Düğmeyi devre dışı bırakmak zorunlu değildir; yalnızca içeriğin tekrar gizlenmesine gerek olmayan durumlarda kullanılabilecek bir tercihtir. İçeriğin tekrar gizlenip gösterilmesi gerekiyorsa düğmeyi devre dışı bırakmamalı ve hidden değerini tersine çevirmelisiniz.

CSS sınıfı kullanarak gösterme ve gizleme​


Görünürlükle birlikte renk, boşluk, animasyon veya başka görsel özellikleri de değiştirecekseniz CSS sınıfı kullanmak daha esnek olabilir. Bu yöntemde JavaScript yalnızca sınıfı ekler veya kaldırır; görünüm kararını CSS verir.

HTML: 
<style>
  .panel {
    display: none;
    padding: 12px;
    border: 1px solid #ccc;
    margin-top: 8px;
  }

  .panel.acik {
    display: block;
  }
</style>

<button id="panelBtn" type="button" aria-expanded="false" aria-controls="panel">
  Paneli göster
</button>

<div id="panel" class="panel">
  Panel içeriği burada gösterilir.
</div>

<script>
  const panelBtn = document.querySelector('#panelBtn');
  const panel = document.querySelector('#panel');

  panelBtn.addEventListener('click', () => {
    const acik = panel.classList.toggle('acik');

    panelBtn.textContent = acik ? 'Paneli gizle' : 'Paneli göster';
    panelBtn.setAttribute('aria-expanded', String(acik));
  });
</script>

classList.toggle('acik') sınıf yoksa ekler, varsa kaldırır ve yapılan işlemin sonucunu true veya false olarak döndürür. Bu nedenle acik değişkeni panelin işlemden sonraki durumunu doğru biçimde belirtir.

display: none uygulanan öğe sayfa düzeninde yer kaplamaz ve kullanıcıya görünmez. Ancak bu yöntem tek başına her zaman yeterli değildir. İçeriğin erişilebilirlik ağacındaki davranışı, odaklanabilir alt öğeler veya animasyon gereksinimi önemliyse hidden özelliği ya da erişilebilirlik nitelikleriyle birlikte daha dikkatli bir yapı kurulmalıdır.
YöntemNe zaman kullanılmalı?Dikkat edilmesi gereken
hidden özelliğiBasit gösterme ve gizleme işlemleriÖğe görünürlükten tamamen çıkarılır; animasyon için doğrudan uygun değildir.
classList.toggle()Görünüm CSS sınıfına göre değişecekseBaşlangıç sınıfı ile CSS kuralı birbiriyle uyumlu olmalıdır.
style.displayÇok kısa ve özel durumlu işlemlerGörünüm mantığını JavaScript içine taşıdığı için büyüyen arayüzlerde bakımı zorlaşabilir.
Bu seçenekler arasında karar verirken işlemin yalnızca görünürlük değişimi mi, yoksa daha geniş bir arayüz durumu mu olduğunu düşünün. Basit bir açıklama kutusu için hidden yeterlidir. Bir panelin renk, boşluk ve geçiş efektleri de değişecekse sınıf yaklaşımı daha uygundur.

Birden fazla düğme ve hedef öğe kullanmak​


Sayfada birden fazla açma düğmesi varsa her düğme için ayrı olay yazmak yerine düğmeye hedef öğenin kimliğini verebilirsiniz. Aşağıdaki örnekte data-target değeri hangi öğenin gösterileceğini belirtir.

HTML: 
<button class="ac-kapat" type="button" data-target="urun1" aria-expanded="false">
  Ürün 1 ayrıntıları
</button>
<div id="urun1" hidden>
  Ürün 1 hakkında ayrıntılı bilgi.
</div>

<button class="ac-kapat" type="button" data-target="urun2" aria-expanded="false">
  Ürün 2 ayrıntıları
</button>
<div id="urun2" hidden>
  Ürün 2 hakkında ayrıntılı bilgi.
</div>

<script>
  const dugmeler = document.querySelectorAll('.ac-kapat');

  dugmeler.forEach((dugme) => {
    dugme.addEventListener('click', () => {
      const hedefId = dugme.dataset.target;
      const hedef = document.getElementById(hedefId);

      if (!hedef) {
        return;
      }

      hedef.hidden = !hedef.hidden;
      const gorunuyor = !hedef.hidden;

      dugme.setAttribute('aria-expanded', String(gorunuyor));
    });
  });
</script>

Bu yapıda her düğmenin data-target değeri gerçek bir id ile eşleşmelidir. Örneğin data-target="urun1" değeri id="urun1" olan öğeyi hedefler. Eşleşen öğe yoksa getElementById() null döndürür; if (!hedef) kontrolü de JavaScript hatası oluşmasını önler.

Kod çalışmıyorsa kontrol edilecek noktalar​


Düğmeye tıklayınca hiçbir şey olmuyorsa önce HTML kimliklerinin JavaScript seçicileriyle aynı olduğunu kontrol edin. querySelector('#bilgiKutusu') kullanıyorsanız HTML içinde gerçekten id="bilgiKutusu" bulunmalıdır. Büyük-küçük harf farkı da eşleşmeyi bozar; bilgiKutusu ile bilgikutusu aynı kimlik değildir.

İkinci olarak script kodunun HTML öğeleri oluşturulduktan sonra çalıştığından emin olun. Script body içindeki ilgili öğelerden önce çalışırsa querySelector() veya getElementById() henüz öğeyi bulamayabilir. Script'i body etiketinin sonuna koymak veya JavaScript dosyasını defer özniteliğiyle yüklemek bu sırayı düzeltir.

Tarayıcının geliştirici araçlarındaki Console bölümünde null, is not a function veya benzeri bir hata görürseniz hata satırını ve kullanılan kimlikleri birlikte kontrol edin. Öğenin görünür olduğu halde beklediğiniz biçimde görünmemesi ise genellikle CSS kuralından kaynaklanır; bu durumda geliştirici araçlarında öğenin display, visibility, opacity ve üst öğelerden gelen kurallarını inceleyin. JavaScript'in yalnızca sınıfı değiştirmesi, CSS'nin de bu sınıfa gerçekten görünür bir stil vermesini gerektirir.

Sık sorulan sorular​

Tıklayınca öğe görünüyor fakat tekrar gizlenmiyorsa ne yapılmalı?​

Kodda yalnızca hedef.hidden = false kullanılmış olabilir. Tekrar açıp kapatmak için hedef.hidden = !hedef.hidden kullanın. CSS sınıfı yönteminde ise classList.add() yerine classList.toggle() tercih edilmelidir.

JavaScript ile style.display değiştirmek mümkün mü?​

Evet. Örneğin hedef.style.display = 'block' öğeyi gösterir, hedef.style.display = 'none' gizler. Ancak bu yaklaşım mevcut CSS düzenini ezebilir. Görünüm kurallarını CSS sınıfında tutup JavaScript ile yalnızca sınıfı değiştirmek genellikle daha düzenli bir çözümdür.

Neden aria-expanded kullanılıyor?​

Bu öznitelik, düğmenin kontrol ettiği içeriğin açık mı kapalı mı olduğunu yardımcı teknolojilere bildirir. Görsel olarak içeriği göstermek için tek başına yeterli değildir; hidden veya CSS sınıfı gibi gerçek görünürlük değişikliğinin de yapılması gerekir.

Tıklama yerine klavyeyle de çalışır mı?​

Yerleşik button öğesine click olayı bağlandığında kullanıcı düğmeye klavyeyle odaklanıp Enter veya Boşluk tuşuyla da işlemi başlatabilir. Tıklama davranışı için div kullanmak yerine button tercih etmek bu erişilebilirlik davranışını hazır olarak sağlar.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)