การใช้งาน jQuery toggle(): ซ่อน/แสดงองค์ประกอบพร้อมแอนิเมชัน

jQuery toggle() คืออะไร?

เมธอด toggle() ทำงานเหมือนสวิตช์ไฟ: สลับระหว่างแสดง (Show) และซ่อน (Hide) องค์ประกอบที่เลือก รองรับพารามิเตอร์ระยะเวลา (Duration) และฟังก์ชัน Callback หลังแอนิเมชันเสร็จ

ไวยากรณ์พื้นฐาน

$("selector").toggle(); // สลับแสดง/ซ่อนทันที
$("selector").toggle(duration, callback); // พร้อมแอนิเมชันและ Callback

ตัวอย่างที่ 1: Toggle แบบง่าย (ไม่มีแอนิเมชัน)

HTML

<button> Click me </button>
<p> Read me! </p>
<p id="hide" style="display: none"> NO! Read ME! </p>

jQuery

<script>
  $("button").click(function() {
    $("#hide").toggle();
  })
</script>

คลิกปุ่มครั้งแรก: แสดงย่อหน้าที่ซ่อนอยู่
คลิกอีกครั้ง: ซ่อนย่อหน้านั้นอีกครั้ง

ตัวอย่างที่ 2: Toggle พร้อมแอนิเมชันและ Callback

HTML

<button> Click me </button>
<img id="cat" src="cat.jpg">
<p style="display: none"> Animation Complete </p>

jQuery

<script>
  $('button').click(function() {
    $('#cat').toggle('slow', function() {
      $('p').toggle();
    })
  })
</script>

กระบวนการ:
1. คลิกปุ่ม → รูปแมวหายไปแบบช้า ('slow' = 200ms)
2. หลังแอนิเมชันเสร็จ → Callback รัน → แสดงข้อความ "Animation Complete"

ค่าพารามิเตอร์ Duration

• ตัวเลข: มิลลิวินาที (เช่น 1000 = 1 วินาที)
• สตริง: 'fast' (200ms), 'slow' (600ms)

สรุป

toggle() เป็นเมธอดสะดวกสำหรับสลับการแสดงผลพร้อมแอนิเมชัน ใช้ร่วมกับ click() ได้ผลดีสำหรับ UI ที่ต้องการซ่อน/แสดงเนื้อหา เช่น เมนูแบบ Collapse, Modal, หรือ Tooltip