JQuery- HTML element,div,buton,yazı vs. gizleme ve gösterme kodu kullanımı örneği(JQuery- HTML element,div,button,text etc. hide and show code usage example)

Html elementlerini gizleme gösterme işlemleri 2 farklı şekilde yapılabilmektedir. “display” ve “visibility”.
“display” ile gizleme işleminde ilgili etiket ekranda yer kaplamaz ancak
“visibility” ile gizleme işleminde ise ilgili etiket ekrandaki boyutu kadar boşluk olarak yer kaplar.

Element Gizleme

<div id="displayDivId" style="display: none;"></div>
<div id="visiblityDivId" style="visibility: hidden;"></div>

Element Gösterme

<div id="displayDivId" style="display: block;"></div>
<div id="visiblityDivId" style="visibility: visible;"></div>

JQuery ile tatbik edelim

JQuery de “JQuery” yada “$” anahtar kelimeleri kullanılabilmektedir.

“attr” özelliğini kullanılabilir yada “css” kullanılabilir.

JQuery Div Gizleme fonksiyonu

jQuery("#displayHideDivId").attr("style", "display: none");

JQuery Div Gösterme fonksiyonu

$(".hiddenText").css("display", "block");

JQuery Örneği Kodu

Bu örnekte jquery kütüphanesine ihtiyacınız olacaktır. Bu yazıyı tıklayarak jquery kütüphanesini indirebilirsiniz.

<!DOCTYPE html>
<html>
<head>
	<title>hide show with JQuery example | JQuery ile gizleme gösterme örneği | www.yazilimcity.net</title>
	<meta charset="utf-8"/>

	<!--local library-->
	<!--<script type="text/javascript" src="../../includes/lib/js/jquery-1.8.2.js"></script>-->
	<!--online library-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	<script type="text/javascript">
		//hide div
		var hideDiv = function () {
			jQuery("#displayHideDivId").attr("style", "display: none");
		};

		//show div
		function showDiv() {
			$("#displayHideDivId").attr("style", "display: block");
		}

		//show second div
		$(".showText").live('click', function () {
			$(".hiddenText").attr("style", "display: block", "background-color: #00ced1");
		});

		//hide second div
		var hideText = function () {
			$(".hiddenText").css("display", "none");
		}
	</script>
</head>
<body>

	<div id="displayHideDivId" style="background-color: #00ced1;" onclick="hideDiv()">
		buraya tıklayınca yazı gizlenecek
	</div>
	<input type="button" value="yazıyı göster" onclick="showDiv()">
	<hr style="color: #8b0000;">


	<div class="hiddenText" style="display: none;">
		başlangıçta gizliydi
	</div>
	<button class="showText">yazıyı göster</button>
	<a href="javascript:hideText()">yazıyı tekrar gizle</a>

	<footer>
		<b>
			<address>
				<a href="http://www.yazilimcity.net">www.yazilimcity.net</a>
			</address>
		</b>
	</footer>
</body>
</html>

Gerçek Zamanlı JQuery Örneği




	 hide show with JQuery
	

	
	
	
	

	



	
buraya tıklayınca yazı gizlenecek

yazıyı tekrar gizle
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

2 Comment

  1. acemi says: Reply

    gizli kodlara müdahale edemiyorum

    1. sorunsuz çalışmaktadır. iletişim e-posta adresimizden kod bloğunuzu gönderirseniz kontrol edelim

Leave a Reply


*