วิธีการ slideToggle ใน jQuery

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

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

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

และมี CSS:

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

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

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