Javascript ile göster/gizle özelliği (Show/hide)

Forumlarda, alışveriş sitelerinde ve blog temalarında buna benzer özelliklerin sıkça kullanıldığını görebilirsiniz. Bizim ufacık scriptimiz de div, span, resim veya farklı bir taşıyıcı elemanın ziyaretçiler tarafından gizlenebilmesine olanak sağlıyor. Fakat bu script ajax gibi eş zamanlı, yani sayfa değişmeden işlemler yaptırabilmenize yardımcı olmuyor, sadece ziyaretçinin o an gördüğü içeriği gizleyip yeniden gösterebilmesi için tasarlandı. Eğer aradığınız böyle bir işlev ise daha sonra ajax ile bunun nasıl yapıldığını anlatacağız.

Scriptin kullanımı:
Yöntem 1: Gizlenecek eleman için “Göster/Gizle” gibi tek bir link kullanmak istiyorsanız <head> </head> satırları arasına eklenecek kod şu şekilde:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
// göster/gizle
function showMe(blockId) {
     if ( document.getElementById(blockId).style.display == 'none' ) {
          document.getElementById(blockId).style.display = ''; }
else if ( document.getElementById(blockId).style.display == '' ) {
          document.getElementById(blockId).style.display = 'none'; }
}
</script>

Daha sonra gizlenecek içeriğin id’sini tanımlıyoruz

1
<div id="gizlebeni">Div içeriği</div>

ardından bu içeriği gizleyip gösterecek olan linki tanımlıyoruz

1
<a href="javascript:;" onclick="showMe('gizlebeni');">Göster/Gizle</a>

bu link tek başına içeriğin gösterilip gizlenmesini sağlayacaktır.

Yöntem 2: Eğer gizlenecek içerik için ayrı ayrı “Göster” ve “Gizle” linkleri atamak istiyorsanız <head> </head> satırları arasına ekleyeceğiniz kod şu şekilde olmalı:

1
2
3
4
5
6
7
<script type="text/javascript">
// Göster ve gizle
function showMe(blockId) {
          document.getElementById(blockId).style.display = ''; }
function hideMe(blockId) {
          document.getElementById(blockId).style.display = 'none'; }
</script>

yine gizlenecek içeriğin id’sini tanımladıktan sonra

1
<div id="gizlebeni">Div içeriği</div>

içeriği gösterip gizlemek için linkleri aşağıdaki gibi tanımlıyoruz:

1
2
<a href="javascript:;" onclick="showMe('gizlebeni');">Göster</a>
<a href="javascript:;" onclick="hideMe('gizlebeni');">Gizle</a>

Umuyorum ki bu iki farklı yöntem scripti kullanacağınız alanlara göre işinizi kolaylaştıracaktır.

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

12 Yorum

  1. yunus

    MERHABA TŞKLER KODİÇİN AMA BİRŞEY SORACAGIM SAYI ACINCA YAZI HEMEN CIKIYOR GİZLİ OLMASI İÇİN HANGİ KOD NEREYE YAZMAMLAZIM ?

  2. Ali

    Sayfa açılınca içeriğin çıkmaması için içeriğe display none vermen gerekiyor.
    <div style=”display:none;” id=”gizlebeni”>Yayınlanan içerik</div>

  3. narko

    bilgi için teşekkürler. benim bir sorum olacak bir sitenin sayfa kaynağında ki gizli içerikleri görebilir miyiz.mesela; “>var isfbfriend = false; var fbid = 0; burda ki fb id sini görebilir miyiz?

  4. ibrahim

    Merhaba çok zaman geçmiş ama sormak istedim yinede sayfaya bir türlü gizli gelmesini sağlayamadık yardımcı olabilirmisiniz?

  5. M.Özpence

    Peki birden fazla datanın özelliğini gizlediğimizde mesela öğrenci 1 göster’e tıkladıgımızda ögrencı 1 ın detaylarını gösterıyor. öğrenci1 detayları açıkken öğrenci 2 detaylarını göster’e tıklayınca ogrenci 1 ın detaylarını kapatmadan ogrencı 2 nin detaylarını açıyor.

    Öğrenci 1 detayları açıkken öğrenci 2 detayları göster dedıgımde ögrencı 1 detaylarını kapatıp ogrencı 2 detaylarını göstermesını nasıl sağlarız?

    • Caner Öncel
      Yazar

      Merhaba Özpençe,

      Bunlar 10 sene önce yazılmış kötü, verimsiz kodlar. Daha güncel bir şeyler tercih etmeni tavsiye ederim. Hatta jQuery kütüphanesi yüklüyse projende bu tür işlemleri çok daha basit biçimde halledebilirsin.

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir