Ayberk Atasay

ASP, CSS, Internet konuları üzerine paylaşımlar

JavaScript Göster / Gizle Fonksiyonu

Geçen gün benden ufak bir konuda yardım isteyen arkadaşımın sorusuyla, benimde sizlere paylaşmam, ihtiyacı olanların işine yarayabileceğini düşündüğüm bir kod oldu. Bu kod ile HTML sınıfında otomatik olarak değişiklik yaparak, içeriğin gizlenmesini / gösterilmesini sağlayabilirsiniz.

JavaScript Kodu:

function GosterGizle(element) {



var element = document.getElementById(element);



if(element.style.display == "none") {

element.style.display = "block";

}



else {

element.style.display = "none";

}}

Burada kodlarımız eğer ilgili elemanımızın (id'ye göre seçiliyor) display seçeneği none yani gösterme ise fonksiyonumuzun gösterme kısmını çalıştır, eğer gösteriliyorsa gizle kısmını çalıştırıyoruz. (Kodu sunan kişi Silverday)

HTML Kodu (İlk gelen hali gösterilen):

<a href="#" onclick="GosterGizle('ElemanAdi');">Göster/Gizle</a>

<div id="ElemanAdi">İçeriğimiz</div>

Burada ilk başta ilgili katmanımız görüntülenecek, linke tıklandığında gizlenecek.

HTML Kodu (İlk gelen hali gizlenen):

<a href="#" onclick="GosterGizle('ElemanAdi');">Göster/Gizle</a>

<div id="ElemanAdi" style="display:none;">İçeriğimiz</div>

Burada ilk başta ilgili katmanımız gizli olacak, linke tıklandığında görüntülenecek.

Javascript/AjaxAyberk Atasay23 Kasım 2009, PazartesiEkle Bunu

Önceki Kayıt

Sonraki Kayıt

Yorumlar

sekspartner
4 Haziran 2010, Cuma

harika paylaşım için çok teşekkürler

Şevki
23 Mayıs 2010, Pazar

ben bunu blogspota uygulayamadım üstteki kodu <script language="JavaScript"></script> arasına alıp tanımladım olmadı :(

Kemal
26 Aralık 2009, Cumartesi

güzel bir paylaşım teşekkürler..

Fatih
26 Kasım 2009, Perşembe

Paylaşım için teşekkürler