Accordion — Vanilla

Accordion with vanilla HTML + JS. Copy the markup and script; ensure Rizzo CSS is loaded.

Accordion

Expandable sections. Use JS to toggle aria-expanded, the panel hidden state, and the accordion__trigger--expanded / accordion__panel--expanded classes.

Add this component

The command below includes <strong>Accordion</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
Live example

Content for section one. Only one panel is open at a time.

HTML

Copy the markup below. Ensure Rizzo CSS is loaded on the page.

html html 
<div class="accordion">
  <div class="accordion__item">
    <button type="button" class="accordion__trigger" aria-expanded="false" aria-controls="acc-1" id="acc-trigger-1">Section one</button>
    <div id="acc-1" class="accordion__panel" hidden>
      <div class="accordion__panel-inner">
        <div class="accordion__panel-content"><p>Content for section one. Only one panel is open at a time.</p></div>
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <button type="button" class="accordion__trigger" aria-expanded="false" aria-controls="acc-2" id="acc-trigger-2">Section two</button>
    <div id="acc-2" class="accordion__panel" hidden>
      <div class="accordion__panel-inner">
        <div class="accordion__panel-content"><p>Content for section two.</p></div>
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <button type="button" class="accordion__trigger" aria-expanded="false" aria-controls="acc-3" id="acc-trigger-3">Section three</button>
    <div id="acc-3" class="accordion__panel" hidden>
      <div class="accordion__panel-inner">
        <div class="accordion__panel-content"><p>Content for section three.</p></div>
      </div>
    </div>
  </div>
</div>

JavaScript

javascript javascript 
document.querySelectorAll('.accordion__trigger').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var expanded = btn.getAttribute('aria-expanded') === 'true';
    var panelId = btn.getAttribute('aria-controls');
    var panel = panelId ? document.getElementById(panelId) : null;
    var newExpanded = !expanded;
    btn.setAttribute('aria-expanded', newExpanded);
    btn.classList.toggle('accordion__trigger--expanded', newExpanded);
    if (panel) {
      panel.hidden = !newExpanded;
      panel.classList.toggle('accordion__panel--expanded', newExpanded);
    }
  });
});

Other frameworks: Astro · Svelte · Vue · React