jQuery ซ่อนแสดงข้อมูล ด้วยคำสั่ง hide และ show

สอนเขียน jQuery ซ่อนแสดงข้อมูล ด้วยคำสั่ง hide และ show บทความนี้แนะนำการใช้งานคำสั่ง show เพื่อแสดงข้อมูล และคำสั่ง hide สำหรับซ่อนข้อมูล โดยทั้ง 2 คำสั่งเป็นคำสั่งของ jQuery สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery ซ่อนแสดงข้อมูล ด้วยคำสั่ง hide และ show

<div id="content">Hello, Devdit</div>

<input type="button" value="แสดง" id="btnShow"> <input type="button" value="ซ่อน" id="btnHide">

<script>
    $("#btnShow").click(function(){
        $("#content").show();
    });
    $("#btnHide").click(function(){
        $("#content").hide();
    });
</script>

jQuery ซ่อนแสดงข้อมูล ด้วยคำสั่ง hide และ show ตัวอย่างเมื่อผู้ใช้งานกดปุ่ม แสดง จะเข้าไปทำงานที่ $("#btnShow").click ซึ่งจะเป็นการแสดงข้อมูลของ div id=content ด้วยคำสั่ง $("#content").show() และกรณีถ้าผู้ใช้งานกดปุ่ม ซ่อน จะเข้าไปทำงานที่ $("#btnHide").click ซึ่งจะซ่อนข้อมูลของ div id=content ด้วยคำสั่ง $("#content").hide()