ในโลกของการพัฒนาเว็บไซต์ที่เน้นประสิทธิภาพสูง (Performance-Driven Web Development) การสร้างองค์ประกอบแบบ Interactive เช่น Accordion หรือ Collapsible Content ถือเป็นเรื่องที่ขาดไม่ได้ อย่างไรก็ตาม การพึ่งพา JavaScript ในทุกส่วนของหน้าเว็บอาจนำมาซึ่งภาระด้านขนาดไฟล์ (Bundle Size) และความซับซ้อนในการบำรุงรักษา (Maintenance Overhead) โดยไม่จำเป็น
ในฐานะ Senior Architect เราจึงต้องมองหาโซลูชันที่ทั้งมีประสิทธิภาพสูง (Vanilla) และยังคงรักษาประสบการณ์ผู้ใช้ (UX) ได้อย่างยอดเยี่ยม วันนี้เราจะมาเจาะลึกถึงพลังของ HTML5 ที่มอบเครื่องมือทรงพลังอย่างแท็ก <details> และ <summary> ซึ่งช่วยให้คุณสร้าง Accordion ที่สมบูรณ์แบบได้ด้วยโค้ด HTML บริสุทธิ์ โดยไม่ต้องเขียน JavaScript แม้แต่บรรทัดเดียว
💡 หลักการทำงานของ HTML5 Accordion (Vanilla HTML)
แท็ก <details> ทำหน้าที่เป็นคอนเทนเนอร์หลักที่กำหนดขอบเขตของเนื้อหาที่สามารถเปิด/ปิดได้ (Collapsible Container) ส่วนแท็ก <summary> จะทำหน้าที่เป็นส่วนหัว (Header) ที่ผู้ใช้สามารถคลิกเพื่อเปิดหรือปิดเนื้อหาที่อยู่ภายใน <details>
การทำงานนี้เป็นคุณสมบัติที่ได้รับการรองรับมาตรฐานโดยเบราว์เซอร์ (Browser Native Feature) ทำให้มันมีประสิทธิภาพสูงมากในแง่ของความเร็วในการโหลด (Load Speed) และที่สำคัญที่สุดคือเรื่องของการเข้าถึง (Accessibility) เนื่องจากเบราว์เซอร์จัดการสถานะการเปิดปิดให้ ทำให้เครื่องมือช่วยเหลือ (Assistive Technologies) สามารถเข้าใจโครงสร้างปฏิสัมพันธ์นี้ได้อย่างถูกต้องตามมาตรฐาน WCAG
🚀 ตัวอย่างการใช้งานเชิงแนวคิด (Conceptual Implementation)
เนื่องจากเรากำลังจำลองการดึงโครงสร้างข้อมูลเชิงปฏิสัมพันธ์นี้จากฐานข้อมูล (PostgreSQL) เราจึงแสดงโค้ดในรูปแบบการ Query เพื่อให้เห็นว่าข้อมูลโครงสร้างนี้ถูกจัดเก็บและแสดงผลอย่างไร
SQL
SELECT
'<!-- Accordion Item 1 -->' AS item_id,
'ข้อมูลเกี่ยวกับสินค้า A' AS summary_title,
'<details><summary>ข้อมูลเกี่ยวกับสินค้า A</summary><p>รายละเอียดสินค้า A: มีคุณสมบัติหลักคือ 1,2,3</p>
<!-- /wp:paragraph --></details>' AS content_html
UNION ALL
SELECT
'<!-- Accordion Item 2 -->' AS item_id,
'ข้อมูลเกี่ยวกับสินค้า B' AS summary_title,
'<details><summary>ข้อมูลเกี่ยวกับสินค้า B</summary><!-- wp:paragraph {"className":"wp-block-paragraph"} -->
<p>รายละเอียดสินค้า B: มีคุณสมบัติหลักคือ apple,banana,orange</p>
<!-- /wp:paragraph --></details>';
ในตัวอย่างนี้ เราใช้ SELECT เพื่อดึงโครงสร้าง HTML ที่สมบูรณ์ของ Accordion ออกมา โดยแต่ละแถว (Row) คือหนึ่งรายการ Accordion ซึ่งแสดงให้เห็นว่าเราสามารถจัดการโครงสร้างที่ซับซ้อนนี้ด้วยการจัดการข้อมูล (Data Management) ได้อย่างเป็นระบบ
✅ ข้อดีทางสถาปัตยกรรม (Architectural Benefits)
การใช้ <details> และ <summary> ไม่ได้เป็นเพียงแค่ทางเลือกด้านโค้ดเท่านั้น แต่ยังเป็นทางเลือกที่ดีกว่าในเชิงสถาปัตยกรรม (Architectural Choice) เพราะ:
- Performance: โหลดเร็ว ไม่ต้องรอการประมวลผล JavaScript ในการสร้างโครงสร้างพื้นฐาน
- Accessibility: รองรับมาตรฐานการเข้าถึงโดยธรรมชาติของเบราว์เซอร์
- Maintainability: โค้ดสะอาด (Clean Code) และง่ายต่อการบำรุงรักษา เนื่องจากไม่มี Logic ของ JavaScript เข้ามาเกี่ยวข้อง
✨ บทสรุป: การผสมผสานระหว่างความเรียบง่ายและประสิทธิภาพ
สำหรับนักพัฒนาที่ต้องการสร้างประสบการณ์ผู้ใช้ที่ล้ำสมัย แต่ยังคงยึดมั่นในหลักการของโค้ดที่สะอาดและมีประสิทธิภาพสูง (Clean and Performant Code) การใช้คู่แท็ก <details> และ <summary> คือคำตอบที่สมบูรณ์แบบ มันช่วยให้เราสามารถบรรลุฟังก์ชันการทำงานระดับสูง (High-Level Functionality) โดยใช้เพียงพลังของ HTML5 และ CSS เท่านั้น เป็นการพิสูจน์ว่าบางครั้ง ความเรียบง่ายที่สุดกลับเป็นโซลูชันที่ดีที่สุดเสมอ