19 Şubat 2013 Salı

jQuery Hide - Show (Göster - Gizle)

jQuery efektlerinden Hide ve Show'u anlatacağım. HTML elementlerini gizleyip göstermeye yarayan komutların kullanımı oldukça basit.

Bir HTML dosyası oluşturalım.

İlk olarak <head> </head> etiketleri arasında jquery dosyamı ekliyorum.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

Body kısmında

<p>Gösterilecek yazı.</p>
<button id="goster">Göster</button>
<button id="gizle">Gizle</button>

kodlarını ekliyorum. Ardından tekrar head kısmına gelip

<script type="text/javascript">
$(document).ready(function(){
  $("#gizle").click(function(){
    $("p").hide();
  });
  $("#goster").click(function(){
    $("p").show();
  });
});
</script>

kodunu ekliyorum. Burada dikkat etmeniz gereken nokta yukarıda jquery dosyasını eklerken kullandığımız <script> kodları arasına kod eklememek. Yeni bir <script> tagı açıp kodlarımı onun içine ekliyorum.

Böylece Gizle butonuna bastığımızda yazı gizleniyor, Göster butonuna bastığımızda ise yazı tekrar gösteriliyor.

Kodun tamamı :

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("#gizle").click(function(){
    $("p").hide();
  });
  $("#goster").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>Gösterilecek yazı.</p>
<button id="gizle">Gizle</button>
<button id="goster">Göster</button>
</body>
</html>