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.
12 yorum
MERHABA TŞKLER KODİÇİN AMA BİRŞEY SORACAGIM SAYI ACINCA YAZI HEMEN CIKIYOR GİZLİ OLMASI İÇİN HANGİ KOD NEREYE YAZMAMLAZIM ?
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>
Onu .gizlebeni class’ında belirteceksin işte.
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?
Eline sağlık on numara, kolay anlaşılır kod yazmışsın. Çok işime yaradı
Merhaba çok zaman geçmiş ama sormak istedim yinede sayfaya bir türlü gizli gelmesini sağlayamadık yardımcı olabilirmisiniz?
ibrahim ilk işiniz js kodunu arasına yerleştirmek olsun. bu kısımda problem yaşıyorsunuzdur.
div id için geçerli peki ya div class ise nasıl olcak olmuyo çünküüüüüü çıldırcam
“getElementById” yerine “getElementsByClassName” kullanabilirsin.
Div içeriği Göster/Gizle
bu şekilde yaparsanız içerik ilk başta gizli olarak çıkacaktır.
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?
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.