Accordion

\Kotchasan\Accordion is used for creating collapsible accordion components.

Creation

use Kotchasan\Accordion;

// Create accordion with ID (must be unique)
$accordion = new Accordion('myAccordion');

// Add items
$accordion->add('Title 1', 'Content of Title 1');
$accordion->add('Title 2', 'Content of Title 2', true);  // Open by default

echo $accordion->render();

Constructor

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

Note: The $items parameter in constructor only supports special format with detail, select, className keys. Simple arrays are not supported. Use add() method instead.

Methods

add()

Add item to accordion.

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

render()

Generate HTML for the accordion.

$html = $accordion->render();

Usage Examples

FAQ Accordion

$faq = new Accordion('faq', [], true);  // One tab open at a time

$faq->add(
    'How to register?',
    'Click the "Register" button and fill in the form.',
    true  // Open by default
);

$faq->add(
    'How to pay?',
    'We support credit cards, transfers, and PromptPay.'
);

$faq->add(
    'Return policy?',
    'Returns accepted within 7 days if condition is good.'
);

echo $faq->render();

Create from Array (Recommended: use add() instead)

// ❌ This does NOT work - constructor doesn't support simple array
// $items = ['Title 1' => 'Content 1'];
// $accordion = new Accordion('menu', $items); // Error!

// ✅ Correct way - use add() method
$accordion = new Accordion('menu');
$accordion->add('Title 1', 'Content 1');
$accordion->add('Title 2', 'Content 2');
$accordion->add('Title 3', 'Content 3');

echo $accordion->render();

HTML Output

<div class="accordion">
  <div class="item">
    <input id="myAccordion1" name="myAccordion" type="checkbox">
    <label for="myAccordion1">Title 1</label>
    <div class="body">
      <div class="article">Content 1</div>
    </div>
  </div>
  <div class="item">
    <input id="myAccordion2" name="myAccordion" type="checkbox" checked>
    <label for="myAccordion2">Title 2</label>
    <div class="body">
      <div class="article">Content 2</div>
    </div>
  </div>
</div>

Recommended 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;
}

Related Classes

• Tab - Tab interface
• Html - HTML generation