accordion — collapsible sections

Vertical stack of foldable panels. ARIA-correct (aria-expanded, aria-controls, role="region"), keyboard-friendly, smooth height animation. Vanilla JS, no framework.

Use it for FAQ blocks, product specs, filter groups in a sidebar — anywhere users need to scan many short headings and reveal detail on demand.

Install

npx czg-ui add accordion

@import 'components/accordion'; to app.scss, import './components/accordion'; to app.js.

Requires base.

Parameters

Usage

{var $faq = [
    ['title' => 'Jak začít s instalací?', 'body' => '<p>…</p>'],
    ['title' => 'Mohu komponentu upravit?', 'body' => '<p>…</p>'],
]}

{include /app/components/Accordion/accordion.latte, id => 'faq', items => $faq}

For single-open behavior (default), opening one panel auto-closes the others. Set multiple => true for independent toggles.

Keyboard

• Enter / Space — toggle current item
• Tab — moves focus to next trigger
• Panels animate height from 0 to content with transition

When NOT to use

• 2 panels max — accordion overhead for so few items; just show both
• Critical content that must always be visible — accordion hides it

by default and many users never click

Live preview

ui.czechgroup.cz/component/accordion