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.

Live example

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 1</button>
    <div id="acc-1" class="accordion__panel" hidden>
      <div class="accordion__panel-inner">
        <div class="accordion__panel-content">Content here.</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 2</button>
    <div id="acc-2" class="accordion__panel" hidden>
      <div class="accordion__panel-inner">
        <div class="accordion__panel-content">More content.</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);
    }
  });
});

Astro / Svelte: Astro · Svelte