Accordion
Collapsible content panels with smooth open/close transitions and keyboard accessibility.
How it works
Accordion.js initialises all .accordion
containers on the page. Each item has a .accordion__trigger
button that toggles its adjacent .accordion__panel. By
default, only one panel can be open at a time — opening one closes
the others.
Usage
<div class="accordion">
<div class="accordion__item">
<button class="accordion__trigger">Question?</button>
<div class="accordion__panel">
<div class="accordion__body">Answer.</div>
</div>
</div>
</div>
<!-- Allow multiple panels open at once -->
<div class="accordion" data-accordion-multiple>
...
</div>
On this page
Single panel open
Only one panel can be open at a time. Clicking another closes the current one.
Flat Cake is a lightweight static-site framework built on CakePHP 5. It maps URLs directly to template files — no database, no CMS, just PHP templates with automatic routing.
No. Flat Cake is designed for static sites. If a page needs dynamic data, add a method to PagesController — it can call APIs, read files, or query a database if you choose to configure one.
Create a .php file in templates/Pages/. That's it — the page is live immediately at the corresponding URL, and it appears in the navigation automatically.
Yes. Point the document root to webroot/, run composer install --no-dev and npm run build, and you're done. No Node.js runtime is needed in production.
Multiple panels open
Add data-accordion-multiple to the container to allow any combination of open panels.
Each trigger is a native <button>, so it is focusable with Tab and activated with Enter or Space. The aria-expanded attribute updates automatically.
Panels animate via CSS max-height transition. JavaScript sets the exact height on open so the animation is smooth regardless of content length.
Open items get a brand-tinted border via var(--cb-brand-pastel). The chevron, hover color, and focus ring all follow the runtime theme automatically.