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

เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee
basic ซ่อนและแสดง jquery

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



แสดงเนื้อหที่ซ่อนอยู่ด้วย 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ













URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ