Merhaba arkadaşlar. Bu makalemde sizlere jquery yardımıyla nesne gizleme ve gösterme olayını anlatacağım. Bir de toggle olayını anlatacağım tabiki. Toggle gizleme ve gösterme işlemini tek bir butonda yapmamızı sağlamaktadır. Üstteki resimde de görüldüğü üzere üç adet buton bulunmaktadır. Toggle butonu iki butonun yapacağı işi tek bir butonda toplamamıza olanak sağlar. Öncelikle html css kodlarımız ile başlayalım.
Css Kodlarımız : Bu kodları head etiketi içerisinde style etiketi açarak kullanacağız. Dilerseniz bir css dosyası oluşturup oradan sayfanıza import edebilirsiniz.

<style type="text/css">

#divimiz {

	position: absolute;

	left: 415px;

	top: 231px;

	width: 200px;

	height: 170px;

	z-index: 1;

	background-color: #E9772E;

	color:#ffffff;

	font-family:Tahoma;

	font-size:12px;

}

#butonlar {

	position: absolute;

	left: 441px;

	top: 416px;

	width: 171px;

	height: 24px;

	z-index: 2;

}

.buton {

		padding:4px;

		background-color: #01A1FE;

		color:#ffffff;

		font-family:Tahoma;

		font-size:12px;

		cursor:pointer;

	   }

.buton:hover {

		padding:5px;

		background-color: #333333;

	   }

</style>

Html Kodlarımız :Bu kodlarımızı body etiketi arasında kullanacağız.

<div id="divimiz"></div>

<div id="butonlar">

<a id="gizle" class="buton">Gizle</a>

&nbsp;&nbsp; 

<a id="goster" class="buton">Göster</a>

&nbsp;&nbsp; 

<a id="gizlegoster" class="buton">Toogle</a>

</div>

Javascript Kodlarımız : Bu kodlarımızı head etiketi içerisinde script etiketi açarak kullanacağız. Dilerseniz bir js dosyası oluşturup bu sayfadan çekebilirsiniz.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#goster").click(function(event){

$('#divimiz').show(500);

});

});

$(document).ready(function(){

$("#gizle").click(function(event){

$('#divimiz').hide(500);

});

});

$(document).ready(function(){

$("#gizlegoster").click(function(event){

$('#divimiz').toggle(500);

});

});

</script>

Yukarıda butonların id'lerini ve gizlenecek divin id'sini belirttik. Böylelikle nesneler arasındaki bağlantıyı kurduk. Ben id kullanmayı tercih ettim. Dilerseniz id yerine class'ta kullanabilirsiniz. Javascript ve css kodlarında # yerine .(nokta) koymanız gerekecektir. Sonraki yazılarımda görüşmek üzere...