jQuery Gizle Göster

jQuery Gizle Göster : Bu fonksiyonunun özelliği her hangi bir nesneyi görünür halde ise gizleme işlemini veya gizli halde ise görünür hale getirme işlemini yapmaktadır. jQuery’nin bu özelliği .toggle() fonksiyonu ile yapılmaktadır. Daha ilkel yöntemleri olsa da en son kullanılan ve en gelişmiş yöntem olarak kabul edilen bu fonksiyon kullanılmaktadır.

Sizlerle gizle göster fonksiyonunu nerelerde kullanıldığını, nasıl kullanıldığını ve örnekleriyle birlikte başlıklar halinde açıklamalarıyla sunuyor olacağım.

jQuery Gizle Göster Nerelerde Kullanılır?

jQuery gizle göster özelliği genel olarak özel tasarım Web sayfalarında karşımıza çıkmaktadır. Bir linki, fotoğrafı, bir kutucuğu gizlemek veya göstermek için kullanılmaktadır. Aşağıda sizlere jQuery Toggle özelliğinin nerelerde kullanılacağını maddeler halinde yazıyorum.

  • Menü yapımında gizle göster
  • Fotoğraf gizle göster özelliği
  • Metinlerin açılması veya gizlenmesi
  • Linke tıklandığında bir yerdeki HTML nesnenin görünür hale gelmesi veya gizlenmesi

Bu örneklere benzer bir çok tarzda örnekler verebiliriz. Yine bildiğiniz gibi daha çok ihtiyaç halinde kullanılan özellikler arasında yer almaktadır.

jQuery Gizle Göster .toggle() Örnekleri

jQuery’nin en çok kullanılan özellikleri arasında giren gizle veya göster fonksiyonunun sizlere kademe kademe örneğini yapacağım. Aşağıdaki örnekleri inceleyerek bu konu hakkında bilgi sahibi olabilirsiniz.

Örnek:

$(".kutu").toggle();

Kullanım şekli yukarıdaki gibidir. Ancak bu şekilde kullanmak bizim bir işimize yaramayacaktır. Biz bu fonksiyonu bir buton aracığı ile her seferinde tıklandığı zaman çalıştıracağız.

 

jQuery .toggle() Nasıl Kullanılır?

Sizlere jQuery toggle fonksiyonun detaylı örneğini yapıyorum. Aşağıda jQuery, HTML ve CSS kodlarıyla birlikte paylaşıyor olacağım. Yapacağım uygulama temelde çok basit ancak inanılmaz bir şekilde işlevsel bir örnekdir.

Örnek: Bir buton oluşturalım ve o butona tıklanınca butonun altında açık olan kare kutumuz yavaş bir şekilde kapansın ve tekrar tıklanınca yenide aynı yerinde açılsın. Bunun örneğini sizlerle beraber aşağıda paylaşıyor olacağım.

jQuery Toggle Nedir?
jQuery Toggle Nedir?

HTML Kod:

<div class="buton">Gizle/Göster</div>
<div class="kutu"></div>

CSS Kod:

<style>
	.kutu{
		clear:left;
		width:200px;
		height:200px;
		background:#333;
	}
	.buton{
		float:left;
		clear:left;
		background:#0a91a9;
		color:#fff;
		padding:5px 10px;
		margin-bottom:5px;
		cursor:pointer;
	}
</style>

 

jQuery Kodu:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".buton").click(function(){
			$(".kutu").toggle("slow");
		});
	});
</script>

Tüm bu kodlar hakkında veya farklı bir Web konusu hakkında aşağıdaki form üzerinden bana sorularınızı iletebilirsiniz. Sizlere mümkün olduğunca hızlı bir şekilde geri dönüş yapmaya çalışacağım. Hepinize iyi çalışmalar diliyorum.

jQuery Gizle Göster