Tag: accordion

  • วิธีสร้าง accordion โดยไม่ต้องใช้ javascript

    วิธีสร้าง accordion โดยไม่ต้องใช้ javascript

    ในความคิดของหลาย ๆ คนคิดว่า ถ้าจะสร้าง accordion สำหรับใช้ในเว็บไซต์ เราต้องใช้ javascript ประกอบ แต่ที่จริงแล้ว ตัว html มี tag ที่สามารถใช้งานในลักษณะคล้ายกับ accordion ไว้ให้อยู่แล้ว tag นั้นก็คือ <details>

    โดย <details> นั้น จะใช้งานร่วมกับ <summary> และมีสถานะที่จะแสดงผลข้อมูล คือ open

    รูปแบบมาตรฐานของ <details> จะแสดงผลนำหน้าด้วยสามเหลี่ยมขนาดเล็ก และหมุนเป็นสามเหลี่ยมคว่ำ เพื่อแสดงสถานะการเปิด ปิด

    ส่วนข้อความหลังสามเหลี่ยมนั้น เป็นข้อความใน <summary>

    ตัวอย่างรูปแบบมาตรฐานของ <details>

    <details>
        <summary>Details</summary>
        Something small enough to escape casual notice.
    </details>

    ผลลัพธ์

    Details Something small enough to escape casual notice.

    ซึ่งถ้าเราต้องการให้มีสถานะเปิดแสดงผลตั้งแต่แรก ให้ใส่ open ลงไปใน <details> เลย

    <details open>
        <summary>Details</summary>
        Something small enough to escape casual notice.
    </details>

    ผลลัพธ์

    Details Something small enough to escape casual notice.

    และเรายังสามารถเขียน css เพื่อมาตกแต่งหน้าตาของมันให้ดูสวยงามขึ้นได้อีกด้วย

    ตัวอย่าง accordion โดยไม่ต้องใช้ javascript

    เข้าใจได้ว่า สามารถใช้งานในระดับพื้นฐานได้ละ แต่ถ้าต้องการจะประยุกต์ใช้งานอะไรเพิ่มเติม คงต้องให้ javascript มาช่วยเหลืออยู่ดี