19 Şubat 2013 Salı

jQuery Hide - Show (Göster - Gizle)

By Berkay 13:40 jQuery 1 comment

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>