วิธีการ slideToggle ใน jQuery

วิธีการต่อไปนี้ - slideToggle ทำงานดังนี้: ถ้าองค์要素ถูกซ่อนอยู่ - จะแสดง มันออกมา และถ้าถูกแสดงอยู่ - จะซ่อนมัน คำสะดวก ของวิธีการนี้คือสามารถกำหนดให้กับ ปุ่มเดียวได้ แทนที่จะต้องใช้สองปุ่ม เหมือนใน บทเรียนก่อนหน้า

เรามาดูตัวอย่างต่อไปนี้กัน ให้โค้ด HTML ของเราดูเหมือนดังนี้:

<button id="toggle">คลิกฉัน</button>
<div id="elem">ข้อความ...</div>

และมี CSS:

#elem {
	padding: 10px;
	width: 150px;
	height: 150px;
	border: 1px solid green;
	margin-top: 10px;
}

ตอนนี้มาเขียนโค้ด เพื่อที่เมื่อกดปุ่มเดียว องค์要素 จะสลับระหว่างถูกซ่อนกับถูกแสดง:

$('#toggle').click(function() {
	$('#elem').slideToggle(1000);
});