Javascript ile göster/gizle özelliği (Show/hide)
Yazar: Caner | 25 Ocak 2010 Pazartesi 2:45
 "Pin It")
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.
Benzer Yazılar
-
Javascript – Geri sayım / Yönlendirme Scripti
Ben dahil bir çok internet kullanıcısı uyuz olsa da bazen siteyi sömüren bandwith düşmanlarının bir nebze olsun önünü kesmek veya bazen devamı»
-
Javascript ile Sahibinden.com benzeri resim galerisi
Sahibinden.com gibi otomobil, emlak satışı yapılan sitelerde ürünün farklı resimlerini görüntülemek üzere sıkça kullanılan (örnek) ve tasarımcılar tarafından şiddetle aranılan devamı»
-
Javascript ile silme onayı
Kullanıcı bir içeriği silmeden önce bir javascript alert ile “Eminmisiniz?” diye sordurtmak geri dönülemez hataların önünü kesecektir. Sitemizin <head></head> tagları arasına devamı»
-
Javascript ile popup pencereden kök pencereye form değerleri taşımak
Javascript ile açılan popup pencereden kök pencereye form değerleri (textfield) taşıyabilir hatta popup üzerindeki herhangi bir eleman ile kök formu devamı»
-
Javascript ile textarea veya bir text inputa metin eklemek
Site müdavimlerimizden Burhan’ın özel isteği üzerine; form elemanları arasında metin taşımak veya farklı bir kaynaktan gelen metni textarea veya textfield devamı»
yunus
7 Ağustos 2010 [22:39]
MERHABA TŞKLER KODİÇİN AMA BİRŞEY SORACAGIM SAYI ACINCA YAZI HEMEN CIKIYOR GİZLİ OLMASI İÇİN HANGİ KOD NEREYE YAZMAMLAZIM ?
Ali
13 Haziran 2011 [18:40]
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>
Caner
13 Haziran 2011 [18:42]
Onu .gizlebeni class’ında belirteceksin işte.