Accordion

\Kotchasan\Accordion สำหรับสร้าง collapsible accordion component

การสร้าง

use Kotchasan\Accordion;

// สร้าง accordion พร้อม ID (ต้องไม่ซ้ำกัน)
$accordion = new Accordion('myAccordion');

// เพิ่ม items
$accordion->add('หัวข้อ 1', 'เนื้อหาของหัวข้อ 1');
$accordion->add('หัวข้อ 2', 'เนื้อหาของหัวข้อ 2', true);  // เปิดอยู่

echo $accordion->render();

Constructor

$accordion = new Accordion($id, $items = [], $onetab = false);

Note: Parameter $items ใน constructor รองรับเฉพาะ format พิเศษที่มี keys detail, select, className เท่านั้น ไม่รองรับ simple array แนะนำให้ใช้ method add() แทน

Methods

add()

เพิ่ม item ใน accordion

$accordion->add($title, $detail, $select = false, $className = 'article');

render()

สร้าง HTML ของ accordion

$html = $accordion->render();

ตัวอย่างการใช้งาน

FAQ Accordion

$faq = new Accordion('faq', [], true);  // เปิดได้ทีละอัน

$faq->add(
    'วิธีการสมัครสมาชิก?',
    'คลิกที่ปุ่ม "สมัครสมาชิก" และกรอกข้อมูลให้ครบถ้วน',
    true  // เปิดอยู่เป็นค่าเริ่มต้น
);

$faq->add(
    'วิธีการชำระเงิน?',
    'รองรับการชำระผ่านบัตรเครดิต, โอนเงิน และ PromptPay'
);

$faq->add(
    'นโยบายการคืนสินค้า?',
    'สามารถคืนสินค้าได้ภายใน 7 วัน หากสินค้ายังอยู่ในสภาพสมบูรณ์'
);

echo $faq->render();

สร้างจาก Array (แนะนำใช้ add() แทน)

// ❌ วิธีนี้ไม่ทำงาน - constructor ไม่รองรับ simple array
// $items = ['Title 1' => 'Content 1'];
// $accordion = new Accordion('menu', $items); // Error!

// ✅ วิธีที่ถูกต้อง - ใช้ add() method
$accordion = new Accordion('menu');
$accordion->add('หัวข้อ 1', 'เนื้อหา 1');
$accordion->add('หัวข้อ 2', 'เนื้อหา 2');
$accordion->add('หัวข้อ 3', 'เนื้อหา 3');

echo $accordion->render();

HTML Output

<div class="accordion">
  <div class="item">
    <input id="myAccordion1" name="myAccordion" type="checkbox">
    <label for="myAccordion1">หัวข้อ 1</label>
    <div class="body">
      <div class="article">เนื้อหาของหัวข้อ 1</div>
    </div>
  </div>
  <div class="item">
    <input id="myAccordion2" name="myAccordion" type="checkbox" checked>
    <label for="myAccordion2">หัวข้อ 2</label>
    <div class="body">
      <div class="article">เนื้อหาของหัวข้อ 2</div>
    </div>
  </div>
</div>

CSS ที่แนะนำ

.accordion .item input[type="checkbox"],
.accordion .item input[type="radio"] {
  display: none;
}

.accordion .item label {
  display: block;
  padding: 10px 15px;
  background: #f5f5f5;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}

.accordion .item label:hover {
  background: #e5e5e5;
}

.accordion .item .body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion .item input:checked ~ .body {
  max-height: 500px;
}

.accordion .item .article {
  padding: 15px;
}

คลาสที่เกี่ยวข้อง

• Tab - Tab interface
• Html - HTML generation