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

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