Accordion

Collapsible panels for organizing content into expandable sections. By default, only one panel can be open at a time (true accordion behavior). Supports animated carets, multiple open panels, and compact/borderless variants. Fully keyboard-navigable with ARIA roles.

Basic Accordion (Single Open)

By default, opening a panel automatically closes any other open panels. Default: first panel open.

General Settings

Configure general application settings here.

Privacy & Security

Notifications

// Default behavior: only one panel open at a time
<?= $m->accordion('settings')
    ->panel('General Settings', '<p>General content</p>', 'fa-cog')
    ->panel('Privacy & Security', '<p>Privacy content</p>', 'fa-shield-alt')
    ->panel('Notifications', '<p>Notifications content</p>', 'fa-bell')
    ->defaultOpen(0)  // First panel open by default
    ->animated() ?>

// Listen for panel open/close events
document.getElementById('settings')
    .addEventListener('m:accordion:opened', function(e) {
        console.log('Opened panel:', e.detail.index);
    });

document.getElementById('settings')
    .addEventListener('m:accordion:closed', function(e) {
        console.log('Closed panel:', e.detail.index);
    });

Allow Multiple Panels Open

Use ->allowMultiple() to allow multiple panels to be open simultaneously.

Database

Cache

Storage

// Allow multiple panels to be open at once
<?= $m->accordion('system')
    ->panel('Database', '<p>DB info</p>', 'fa-database')
    ->panel('Cache', '<p>Cache stats</p>', 'fa-memory')
    ->panel('Storage', '<p>Storage info</p>', 'fa-hdd')
    ->allowMultiple()
    ->animated() ?>

// Programmatically control panels
var acc = m.accordion('system');

// Open specific panels
acc.open(0);  // Open first panel
acc.open(2);  // Open third panel (both can be open with allowMultiple)

// Close a panel
acc.close(0);

// Toggle a panel
acc.toggle(1);

// Get currently open panels
var openPanels = acc.getOpen();  // Returns array of indices
console.log(openPanels);  // e.g., [0, 2]

Non-Animated

Omit ->animated() for instant expand/collapse with a static caret icon. Default: non-animated.

Quick Facts

Founded: 2024
Headquarters: Wellington
Employees: 50+

Products

Contact

// Non-animated (default behavior if ->animated() not called)
<?= $m->accordion('info')
    ->panel('Quick Facts', '<ul>...</ul>', 'fa-info-circle')
    ->panel('Products', '<ul>...</ul>', 'fa-box')
    ->panel('Contact', '<p>Contact info</p>', 'fa-envelope')
    ->defaultOpen(0) ?>

// Keyboard navigation available automatically:
// - Arrow Down: Next panel
// - Arrow Up: Previous panel
// - Home: First panel
// - End: Last panel
// - Space/Enter: Toggle focused panel

Compact Style

Use ->addClass('m-accordion--compact') for smaller padding on headers and content.

Option 1

Option 2

Option 3

Borderless Style

Use ->addClass('m-accordion--borderless') to remove borders between panels.

Feature A

Feature B

Feature C

// Compact accordion
<?= $m->accordion('compactAcc')
    ->panel('Option 1', '<p>Content</p>')
    ->panel('Option 2', '<p>Content</p>')
    ->addClass('m-accordion--compact')
    ->animated() ?>

// Borderless accordion
<?= $m->accordion('borderlessAcc')
    ->panel('Feature A', '<p>Content</p>', 'fa-star')
    ->panel('Feature B', '<p>Content</p>', 'fa-star')
    ->addClass('m-accordion--borderless')
    ->animated() ?>

// Combine variants
<?= $m->accordion('combined')
    ->panel('Item', '<p>Content</p>')
    ->addClass('m-accordion--compact m-accordion--borderless')
    ->animated() ?>

// No additional JavaScript required for variants.
// Styling is handled entirely via CSS classes.

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->accordion($id)`	`string`	Create an accordion component.
`->panel($title, $content, ?$icon)`	`string, string, ?string`	Add a panel with title, HTML content, and optional icon. Returns self for chaining.
`->animated()`		Enable animated caret rotation and smooth height transitions. Default: `false`.
`->allowMultiple()`		Allow multiple panels to be open simultaneously. Default: `false` (only one panel open).
`->defaultOpen($index)`	`int`	Set which panel is open by default (0-based index). Default: none open.
`->addClass($class)`	`string`	Add CSS classes. Use `m-accordion--compact` or `m-accordion--borderless` for variants.
`->attr($name, $value)`	`string, string`	Add custom HTML attributes to the accordion container.

JS JS Methods

Method / Property	Parameters	Description
`m.accordion(id)`	`string`	Get the accordion API for the given element ID.
`open(index)`	`int`	Open a panel by index (0-based). If `allowMultiple` is false, closes other panels.
`close(index)`	`int`	Close a panel by index (0-based).
`toggle(index)`	`int`	Toggle a panel's open/closed state.
`getOpen()`		Returns an array of currently open panel indices.

EVENT Events

Event Name	Detail	Description
`m:accordion:opened`	`{index, panel, header, content}`	Fired when a panel is opened. `index` is the 0-based panel index.
`m:accordion:closed`	`{index, panel, header, content}`	Fired when a panel is closed. `index` is the 0-based panel index.