Collapsible — Vanilla
Expand/collapse section with vanilla HTML. Ensure Rizzo CSS and init script are loaded.
Collapsible
Single expand/collapse. Use collapsible__trigger and collapsible__panel with data-collapsible-trigger / data-collapsible-panel. Wire toggle behavior in JS (e.g. full scaffold js/main.js or your own).
Add this component
The command below includes <strong>Collapsible</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npm pnpm yarn bun
npm 
pnpm 
yarn 
bun Live example
This content is shown when the collapsible is expanded. Use Accordion when you need multiple sections.
HTML
html html
<div class="collapsible" data-collapsible>
<button type="button" class="collapsible__trigger" id="trigger-id" aria-expanded="false" aria-controls="panel-id" data-collapsible-trigger>
<span class="collapsible__trigger-label">Show more</span>
<span class="collapsible__icon" aria-hidden="true">▼</span>
</button>
<div class="collapsible__panel" id="panel-id" role="region" aria-labelledby="trigger-id" hidden data-collapsible-panel>
<div class="collapsible__panel-inner"><p>This content is shown when the collapsible is expanded. Use <strong>Accordion</strong> when you need multiple sections.</p></div>
</div>
</div>JavaScript
javascript javascript
document.querySelectorAll('.collapsible[data-collapsible]').forEach(function(root) {
var trigger = root.querySelector('[data-collapsible-trigger]');
var panel = root.querySelector('[data-collapsible-panel]');
if (!trigger || !panel) return;
trigger.addEventListener('click', function() {
var expanded = trigger.getAttribute('aria-expanded') === 'true';
var next = !expanded;
trigger.setAttribute('aria-expanded', next);
panel.hidden = !next;
panel.classList.toggle('collapsible__panel--expanded', next);
});
});