[Layout Test] Interactive directives
Public article with tabs, code group, and accordion for client-side switching checks (PUB-CONTENT-09).
Interactive directives
This page exercises tabs, code groups, and accordions for manual QA of client-side switching and copy behaviour.
Tabs
The Overview tab is active by default. Switch to Setup and confirm only one tab panel is visible at a time.
You are viewing the Setup tab. Switch back to Overview to confirm the panels toggle correctly.
Code group
curl -s https://api.sandbox.interac.ca/healthconst response = await fetch("https://api.sandbox.interac.ca/health");
console.log(await response.json());Switch between cURL and Node.js, then use the Copy button on the active panel. The button should briefly show "Copied".
Accordion
First item
Expand this item to reveal the first accordion body. Collapse it to hide the content again.
Second item
Expand this item while the first is collapsed. Both items should open and close independently using native disclosure controls.
Verification checklist
- Tabs — switch between Overview and Setup; only one panel is visible.
- Code group — switch languages; copy the visible snippet successfully.
- Accordion — expand and collapse each item independently.