เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE

เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE

PHP CODE FATHER โปรแกรมช่วยสร้างโค้ด โปรเจ็ค PHP+MySQL+Boostrap ใช้งานง่าย ๆ


หลาย ๆ คนคงจะเคยเห็น หรือ พบเจอเว็บใหญ่ ๆ ที่เขาใ้ช้เทคนิคนี้กันบ้างแล้ว
ตัวอย่างที่เห็นบ่อยที่สุดก็คือ ที่เว็บวีดีโอยอดฮิต อย่าง Youtube เมื่อเวลาเราคลิกที่ปุ่ม Share vdo
จะมีส่วนของโค้ดที่จะให้ก๊อปเลื่อนลงไป โดยที่ไม่ต้องรีเฟรชหน้าใหม่
ทำให้สะดวก และ ง่ายกับการใช้งานของผู้ใช้งาน

วันนี้ก็เลยจะพาเพื่อน ๆ ได้ทดลองทำดูกัน
เผื่อจะมีใครเอาไปใช้กับเว็บตัวเอง หรือ เอาไปต่อยอดต่อไปได้
ซึ่งผมคงไม่ได้ทำแบบขั้นเทพอะไร เอาแบบง่าย ๆ ให้พอรู้ และเข้าใจกันก็คงจะเพียงพอ

รูปประกอบ

1.ตอนยังไม่คลิก หรือ เปิดมาทีแรก
2.เมื่อคลิกที่ปุ่มก็จะแสดงส่วนที่ซ่อนไว้ขึ้นมาให้ผู้ใช้เห็น และใช้งาน
3.เมื่อคลิกอีกที จะทำการซ่อนกลับคืนเหมือนเดิม

โค้ด
</html>
<meta http-equiv="content-Type" content="text/html; charset=TIS-620">
<script language="JavaScript"> 
function fncShow(ctrl){ // ฟังก์ชั่นสำหรับ แสดง (Show) ส่งค่า id ของ DIV หรือ Table TD TR
document.getElementById(ctrl).style.display = ''; //สั่งให้แสดง
document.getElementById('embed_button').innerHTML ='<input type="submit" name="Submit" value="Hide Embed" onClick="JavaScript:fncHide(\'embed_div\');">'; // หลังจากสั่งให้แสดงเสร็จ ก็ทำการเปลี่ยนสถานะของปุ่มเป็น "ซ่อน"
}
 
function fncHide(ctrl){ // ฟังก์ชั่นสำหรับ ซ่อน ส่งค่า id ของ DIV หรือ Table TD TR
document.getElementById(ctrl).style.display = 'none'; //สั่งให้แสดง
document.getElementById('embed_button').innerHTML ='<input type="submit" name="Submit" value="Show Embed" onClick="JavaScript:fncShow(\'embed_div\');">';  // หลังจากสั่งให้ซ่อนแล้ว ก็ทำการเปลี่ยนสถานะของปุ่มเป็น "แสดง"
}
</script>

<table width="100%">
  <tbody><tr>
    <td width="7%" id="embed_button"><input type="submit" name="Submit" value="Show Embed" onclick="JavaScript:fncShow('embed_div');"></td>
  </tr>
  <tr id="embed_div" style="display:none; "><!-- จุดที่เราต้องการจะแสดง หรือ ซ่อน ในตัวอย่างนี้คือ TR ของ Table -->
    <td>
Embed this VDO&nbsp;&nbsp;:<input type="text" id="code_embed" value="" code-father.com"="" src="http://www.code-father.com&gt;" width="450" height="180" frameborder="0" allowfullscreen="">
<br>
Link to this page&nbsp;&nbsp;: <input name="textfield" type="text" size="50" value="http://www.code-father.com" onclick="this.focus(); this.select();">
</td><!-- เนื้อหาที่ต้องการแสดงให้กับผู้ใช้งานได้เห็น -->
  </tr>
</tbody></table>
</html>
***********************************
ขออธิบายขยายความเพิ่มเติมกันอีกสักนิด ถึงกระบวนการทำงานของบทความนี้นะครับ
  1. เมื่อเปิดมาทีแรก จะเห็นเพียงแค่ปุ่ม "Show Embed" เพื่อให้คลิก เริ่มแรกจะยังไม่แสดงส่วนเนื้อหาให้ผู้ใช้ได้เห็น
    ตามคำสั่ง   id="embed_div" style="display:none; "> เพราะต้องการให้คลิกก่อนจึงจะแสดงผล
  2. เมื่อคลิกที่ปุ่ม "Show Embed" ระบบจะส่งค่า id ของ TR ไปยังฟังก์ชั่น ด้วยคำสั่ง   onclick="JavaScript:fncShow('embed_div');"
  3. ที่ฟังก์ชั่น  fncShow ก็จะสั่งให้แสดงผล ด้วยคำสั่ง  document.getElementById(ctrl).style.display = ''; และทำการเปลี่ยนปุ่ม "Show Embed" เป็น "Hide Embed" เพื่อให้ผู้ใช้ได้คลิกปิดได้หากไม่ต้องการ
  4. เพียงแค่นี้ผู้ใช้ก็จะสามารถเห็นข้อมูลที่เราซ่อนไว้ได้ และหากต้องการปิด หรือ ซ่อน ก็คลิกที่ปุ่ม "Hide Embed" 
ยิ่งอธิบายก็เหมือนจะทำให้เรื่องง่าย ๆ กลายเป็นเรื่องยาก ยังไงก็ไม่รู้
ลองก๊อปโค้ดไปทดสอบดูกันเลย จะได้เห็นผลกับตาว่ามันทำงานได้จริงหรือเปล่า

*** หากสังเกตุดี ๆ หลายคนอาจจะสงสัยว่า ตรงฟังก์ชั่น ทำไมตัวหนึ่งใช้ส่งค่าเข้าไป แต่อีกตัวหนึ่งไม่เห็นส่งค่าเ้ข้าไปหล่ะ
document.getElementById(ctrl).style.display = ''; //สั่งให้แสดง
document.getElementById('embed_button').innerHTML ='';

 ตรงสีเขียว ๆ นั่นหล่ะครับ คือ ม้นใช้ได้ทั้งสองแบบ ขึ้นอยู่กับลักษณะการใช้งาน หากใช้งานแค่จุดเดียว หรือ ฟอร์มเดียว
เราก็ไม่จำเป็นต้องส่งค่าตัวแปร จะง่ายกว่า โดยระบุค่า ID เข้าไปเลย

แต่ถ้าหากฟังก์ชั่นนี้มีการใช้งานร่วมกันในหลาย ๆ ฟอร์ม หรือ หลาย ๆ หน้า  เราก็จะทำฟังก์ัชั่นไว้ในไฟล์ .js
เพื่อเรียกเข้ามาใ้ช้ร่วมกันได้ในหลาย ๆ หน้า เราก็แค่ส่ง ID เข้าไปในฟังก์ชั่น โค้ดของเราก็จะไม่เยอะ ทำให้ง่ายเวลาแก้ไขฟังก์ชั่น เพราะจะแก้เพียงแค่ที่เดียว คือในไฟล์ .js ของเรานั่นเอง



ย้อนกลับ กลับหน้าแรก