JavaScript Gizle Göster

Ç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;

<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;

<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.

<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.