ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic

25 September 2008 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

jquery basic ซ่อนและแสดง

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery basic ซ่อนและแสดง

แสดงเนื้อหที่ซ่อนอยู่ด้วย jquery แบบง่าย ดูตัวอย่างพร้อมโค้ดประกอบ
คลิกเพื่อแสดงข้อความที่ซ่อน

ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่

คลิกเพื่อซ่อนข้อความ

โค้ตประกอบ

<html>
<head>
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript">
	$(function(){
		$("a#demo").click(function(){ 
				$("div#show_demo").show();
		});	
		$("a#demo2").click(function(){ 
				$("div#show_demo").hide();
		});			
	});
</script>
<style type="text/css">
#show_demo{
	width:120px;height:150px;
	border:1px solid #cccccc;
	background-color:#999999;
	display:none;
	padding:5px;
	overflow:hidden;
}
</style>
</head>
<br />

<a href="javascript:void(0)" id="demo">คลิกเพื่อแสดงข้อความที่ซ่อน</a><br />
<div id="show_demo">
ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ ข้อมูลที่ถูกซ่อนอยู่ 
</div>
<a href="javascript:void(0)" id="demo2">คลิกเพื่อซ่อนข้อความ</a><br />
<body>
</body>
</html>

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ