Toggle ซ่อน/แสดง Div เฉพาะที่เลือกด้วย JavaScript/jQuery

ใช้ jQuery toggleClass ซ่อน div ที่เกี่ยวข้องกับปุ่มที่กด

ผูก click event ที่ไอคอน + ใช้ parent().siblings() หา div คู่ขนาน แล้ว toggle class ซ่อน

ตัวอย่างโค้ดเต็ม

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Div</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    .hideDiv { display: none; }
  </style>
</head>
<body>
  <div class="firstDetails">
    <h2 class="customer-track">Customer 1 <i class="fa fa-plus"></i></h2>
    <div class="secondDetails">
      <p class="customer">John</p>
      <p class="customer">US</p>
    </div>
  </div>

  <div class="firstDetails">
    <h2 class="customer-track">Customer 2 <i class="fa fa-plus"></i></h2>
    <div class="secondDetails">
      <p class="customer">David</p>
      <p class="customer">AUS</p>
    </div>
  </div>

  <script>
    $(".fa-plus").on("click", function() {
      // หา div คู่ขนานของ parent (h2) ที่มี class secondDetails
      $(this).parent().siblings('.secondDetails').toggleClass("hideDiv");
      
      // สลับไอคอน +/-
      $(this).toggleClass("fa-plus fa-minus");
    });
  </script>
</body>
</html>

วิธีรัน

บันทึกเป็น index.html แล้วเปิดด้วย Live Server

คำอธิบาย

• $(this) = ไอคอนที่ถูกคลิก
• .parent() = <h2> ที่ครอบไอคอน
• .siblings('.secondDetails') = หา element พี่น้องที่มี class นี้
• .toggleClass("hideDiv") สลับการแสดง/ซ่อน
• เพิ่ม toggleClass ไอคอน fa-plus/fa-minus ให้ UX ดีขึ้น

Vanilla JS Version

document.querySelectorAll('.fa-plus').forEach(icon => {
  icon.addEventListener('click', () => {
    const details = icon.parentElement.nextElementSibling;
    details.classList.toggle('hideDiv');
    icon.classList.toggle('fa-minus');
  });
});