• Bilgilendirme; Sitemizde altyapı değişikliği nedeniyle, kayıtlı üyelerimiz hesaplarına giriş sorunları ile karşılaşabilirler. Buradan yeni şifre isteğinde bulunup hesabınıza tekrar giriş yapabilirsiniz.

JavaScript İle Gizle Göster Yapma

wmgtasarim

WMGTASARIM
Yönetici
Katılım
16 Tem 2022
Mesajlar
39
Konum
Tekirdağ
Kredi
95,820
Meslek
Yazılım
Facebook
wmgdesig
Ticaret: 0 / 0 / 0

Çeşitli sitelerde reklam alanlarında gizle/göster olarak kullanılan JavaScript gizle göster uygulaması sayfa içerisindeki div, tablo, resim gibi HTML nesnelerinde kullanılabilir.​

Gizle göster uygulamasının çalışma mantığı şöyledir.​


CSS display özelliği ile HTML nesnelerinin görünüm ayarını değiştirebilir veya gizleyebiliriz.

HTML nesnesine display özelliği verilmemişse none ile nesneyi gizliyor, none değeri verilmişse none değerini kaldırıyoruz.

JavaScript gizle göster için kullanılacak fonksiyon;

Kod:
<script>
function gizleGoster(ID) {
  var secilenID = document.getElementById(ID);
  if (secilenID.style.display == "none") {
    secilenID.style.display = "";
  } else {
    secilenID.style.display = "none";
  }
}
</script>

Fonksiyonu kullanırken gizle/göster uygulanacak HTML nesnesinin id değerini yazarak kullanabiliriz.

Örnek kullanım;

Kod:
<button onclick="gizleGoster('sonuc');">Gizle / Göster</button>
<p id="sonuc">Gizlenip gösterilen nesne</p>

Örnekte div nesnesinin id değerinin sonuc ve fonksiyona parametre olarak sonuc değeri verildiğine dikkat edin.

Sayfa açıldığında HTML nesnesinin gizli gelmesini istersek, display özelliğine none değeri vermemiz yeterli olacaktır.

Kod:
<button onclick="gizleGoster('sonuc');">Gizle / Göster</button>
<p id="sonuc" style="display: none;">Gizlenip gösterilen nesne</p>

Sayfa açıldığında div gizli olarak gelecek button nesnesine tıklanınca görünür olacaktır.

Hayırlı günler dilerim.