Accordion

The .quanta-accordion is used to create expandable/collapsible sections of content. It supports multiple visual styles and is responsive, theme-aware, and accessible out of the box.

Usage Example

<div class="quanta-accordion card">
  <div class="quanta-accordion-item">
    <button class="quanta-accordion-header" aria-expanded="false">
      Section 1
      <span class="icon">..svg..</span>
    </button>
    <div class="quanta-accordion-content" aria-hidden="true">
      <p>This is the content of section 1.</p>
    </div>
  </div>
</div>

Section 1

Visual Variants

Use utility classes to switch between visual styles:

<div class="quanta-accordion block">...</div>
<div class="quanta-accordion quanta-accordion-outline">...</div>

JavaScript Setup

The accordion component requires JavaScript to toggle content visibility. The default setup listens for click events and toggles aria-expanded and aria-hidden states accordingly.

document.querySelectorAll('.quanta-accordion-header').forEach(header => {
  header.addEventListener('click', () => {
    const expanded = header.getAttribute('aria-expanded') === 'true';
    header.setAttribute('aria-expanded', !expanded);

    const content = header.nextElementSibling;
    content.setAttribute('aria-hidden', expanded);
  });
});

Accessibility

The component uses aria-expanded and aria-hidden for screen reader support.

<button aria-expanded="false">...</button>
<div aria-hidden="true">...</div>