สอบถามเรื่อง ซ่อน/แสดงข้อมูล หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเรื่อง ซ่อน/แสดงข้อมูล หน่อยครับ

สอบถามเรื่อง ซ่อน/แสดงข้อมูล หน่อยครับ
ตัวอย่างตาม code นี้อ่ะคับ



พอคลิ๊กเพิ่มเติมแล้วเจอข้อมูล



Pusirinon 19-12-2016 11:25:54

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
หลักการ ซ่อนรายการที่ต้องการ ด้วย css style เช่น สมตติคลุมด้วย div
 
ถ้าเป็น javascript ธรรมดา ลองศึกษา JavaScript HTML DOM
 
http://www.w3schools.com/js/js_htmldom.asp
 
ถ้าใช้ jqeury ดูโค้ดจากตัวอย่างนี้เป็นแนทาง
 
http://api.jquery.com/slideToggle/

เนื้อหาที่ซ่อนเมื่อเปิดมาครั้งแรก
show ถ้าคลิก แล้วแสดง



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>

<style type="text/css">
  #my_div{
    display: none;
    text-align: center;
  }  
  #my_div_click{
    text-align: center;
    cursor: pointer;
  }
</style>  
<div id="my_div">
เนื้อหาที่ซ่อนเมื่อเปิดมาครั้งแรก
</div>
<div id="my_div_click">
show ถ้าคลิก แล้วแสดง 
</div>
<script>
  $(function(){
    $("#my_div_click").on("click",function(){
      $("#my_div").slideToggle("fast",function(){
        var display = $(this).css("display");
        if(display=='none'){
          $("#my_div_click").html("show ถ้าคลิก แล้วแสดง ");
        }else{
          $("#my_div_click").html("hide ถ้าคลิก แล้วซ่อน ");
        }
      });  // แสดงส่วนที่ซ่อน
    });
  });
  </script>  
</body>
</html>

ตัวอย่าง DEMO

ninenik 19-12-2016
 ความคิดเห็นที่ 2
ขอบคุณมากครับพี่นิก


pusirinon 19-12-2016 17:17






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ