สร้างการแสดงผลแบบสลับ (Accordion) ด้วย JavaScript

วิธีสร้าง UI สไตล์ FAQ ที่สามารถเปิด/ปิดได้ด้วยการคลิก

👀 เดโมการทำงาน

👇คลิกที่หัวข้อคำถามด้านล่างเพื่อเปิด/ปิดเนื้อหา👇

❓ คำถามที่ 1: นี่คืออะไร?

นี่คืออินเทอร์เฟซแบบ Accordion ที่ควบคุมด้วย JavaScript เมื่อคุณคลิกที่หัวข้อ เนื้อหาที่เกี่ยวข้องจะแสดงหรือซ่อน

❓ คำถามที่ 2: ควรใช้เมื่อใด?

เหมาะสำหรับ FAQ, เมนูแบบพับเก็บได้, หรือแสดงข้อมูลเพิ่มเติมที่ซ่อนอยู่ เหมาะกับการจัดระเบียบข้อมูลจำนวนมาก

📋 โค้ดบางส่วน (HTML และ JavaScript)

โค้ด HTML และ JavaScript ขั้นต่ำที่จำเป็นสำหรับการใช้งานฟังก์ชันนี้

*หมายเหตุ: CSS เช่น `.toggle-box` จะต้องถูกกำหนดไว้ในไฟล์ `style.css` ของคุณแล้ว

โครงสร้าง HTML

<!-- ชุดที่ 1 -->
<div class="toggle-box">
  <div class="toggle-title">หัวข้อคำถาม 1</div>
  <div class="toggle-content">
    <p>คำตอบของคำถามที่ 1</p>
  </div>
</div>

<!-- ชุดที่ 2 -->
<div class="toggle-box">
  <div class="toggle-title">หัวข้อคำถาม 2</div>
  <div class="toggle-content">
    <p>คำตอบของคำถามที่ 2</p>
  </div>
</div>

JavaScript

document.querySelectorAll('.toggle-title').forEach(title => {
  title.addEventListener('click', () => {
    title.classList.toggle('active');
    const content = title.nextElementSibling;
    content.classList.toggle('open');
  });
});

💻 โค้ดเต็ม (ไฟล์ HTML)

คัดลอกโค้ดด้านล่าง แล้วบันทึกเป็นไฟล์ `.html` เพื่อลองเปิดใช้งานในเบราว์เซอร์

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>เดโม Toggle</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; }
    .toggle-box { border: 1px solid #ccc; margin-bottom: 1rem; padding: 1rem; border-radius: 8px; }
    .toggle-title { cursor: pointer; font-weight: bold; position: relative; }
    .toggle-title::after { content: '＋'; position: absolute; right: 0; }
    .toggle-title.active::after { content: '−'; }
    .toggle-content { display: none; margin-top: 1rem; border-top: 1px solid #eee; padding-top: 1rem; }
    .toggle-content.open { display: block; }
  </style>
</head>
<body>
  <h1>คำถามที่พบบ่อย</h1>
  <div class="toggle-box">
    <div class="toggle-title">คำถาม 1</div>
    <div class="toggle-content"><p>คำตอบ 1</p></div>
  </div>
  <div class="toggle-box">
    <div class="toggle-title">คำถาม 2</div>
    <div class="toggle-content"><p>คำตอบ 2</p></div>
  </div>
  <script>
    document.querySelectorAll('.toggle-title').forEach(title => {
      title.addEventListener('click', () => {
        title.classList.toggle('active');
        const content = title.nextElementSibling;
        content.classList.toggle('open');
      });
    });
  </script>
</body>
</html>

📘 คำแนะนำในการปรับแต่ง

เทมเพลตนี้เป็นโครงสร้างพื้นฐานในการสร้าง FAQ หรือเมนูแบบ Accordion อย่างง่าย ในการใช้งานจริง การเปิดหลายกล่องพร้อมกันอาจทำให้ผู้ใช้อ่านลำบาก หากต้องการเปิดได้ทีละกล่อง ควรปรับ JavaScript ให้ปิดกล่องอื่นอัตโนมัติ

คุณยังสามารถเพิ่มแอนิเมชันเพื่อให้การแสดงผลดูนุ่มนวลยิ่งขึ้น เช่น ใช้ transition หรือ max-height ใน CSS เพื่อให้เกิดเอฟเฟกต์เลื่อนหรือเฟดได้ง่าย