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.

Facebook Yorumları

9 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?

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