วิธีสร้าง 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 มาช่วยเหลืออยู่ดี