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

12 Yorum

  1. yunus dedi ki:

    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 dedi ki:

    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. Caner Öncel dedi ki:

    Onu .gizlebeni class’ında belirteceksin işte.

  4. narko dedi ki:

    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?

  5. elnur dedi ki:

    Eline sağlık on numara, kolay anlaşılır kod yazmışsın. Çok işime yaradı

  6. ibrahim dedi ki:

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

  7. yıldıray dedi ki:

    div id için geçerli peki ya div class ise nasıl olcak olmuyo çünküüüüüü çıldırcam

  8. Ahmet Devran Bora dedi ki:

    Div içeriği Göster/Gizle

    bu şekilde yaparsanız içerik ilk başta gizli olarak çıkacaktır.

  9. M.Özpence dedi ki:

    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 dedi ki:

      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.

Caner Öncel için bir cevap yazın Cevabı iptal et

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