Accordion

Basic Accordion

Default accordion with multiple panels that can be opened simultaneously

<div class="elv-accordion" data-accordion>
  <div class="elv-accordion__item">
    <button class="elv-accordion__header" aria-expanded="false" aria-controls="panel-1">
      <span>What is G2's Review Verification process?</span>
      <svg class="elv-accordion__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
    <div class="elv-accordion__content" id="panel-1" aria-hidden="true" role="region">
      <div class="elv-accordion__content-inner">
        <div class="elv-accordion__body">
          Content here...
        </div>
      </div>
    </div>
  </div>
</div>

Single-Open Mode

Only one panel can be open at a time — opening a new panel closes the previous one

<!-- Add data-single-open="true" attribute -->
<div class="elv-accordion" data-accordion data-single-open="true">
  <!-- accordion items... -->
</div>

Compact Variant

Reduced padding for tighter layouts

<div class="elv-accordion elv-accordion--compact" data-accordion>
  <!-- accordion items... -->
</div>

Borderless Variant

No outer border, only dividers between items

<div class="elv-accordion elv-accordion--borderless" data-accordion>
  <!-- accordion items... -->
</div>

With Default Open Panel

Start with one panel expanded by setting aria-expanded="true" and aria-hidden="false"

<!-- Set aria-expanded="true" and aria-hidden="false" on default open panel -->
<button class="elv-accordion__header" aria-expanded="true" aria-controls="panel-1">
  <span>Default Open Panel</span>
  <svg class="elv-accordion__icon">...</svg>
</button>
<div class="elv-accordion__content" id="panel-1" aria-hidden="false" role="region">
  <!-- content... -->
</div>

Usage Guidelines

• When to use: FAQs, settings panels, product specifications, help documentation
• When not to use: Navigation menus, forms with dependent fields, content that should always be visible
• Single-open mode: Use when only one section should be visible at a time (e.g., settings categories)
• Multiple-open mode: Use when users may need to compare content across panels (e.g., FAQs)
• Button semantics: Always use <button> for headers — never divs or links
• Icon position: Keep chevron/arrow on the right for consistency with established patterns
• Content length: Keep panel content concise (1-3 paragraphs). Link to full pages for longer content

Accessibility Notes

• Keyboard Navigation:
  • Tab — Move focus to next accordion header
  • Shift + Tab — Move focus to previous accordion header
  • Space or Enter — Toggle accordion panel
  • Arrow Down — (Optional) Move focus to next header
  • Arrow Up — (Optional) Move focus to previous header
  • Home — (Optional) Move focus to first header
  • End — (Optional) Move focus to last header
• ARIA Attributes:
  • aria-expanded — "true" when panel is open, "false" when closed
  • aria-controls — ID of the associated content panel
  • aria-hidden — "false" when panel is visible, "true" when hidden
  • role="region" — Identifies content panel as a landmark region
• Focus Management: Focus remains on the button when toggling — do not move focus to panel content
• Screen Readers: Button text should clearly describe the panel content (avoid generic "More info")
• Visual Focus: Focus outline is 2px solid with outline-offset: -2px for clear keyboard navigation

<!-- Full accessibility markup -->
<button class="elv-accordion__header"
        aria-expanded="false"
        aria-controls="unique-panel-id">
  <span>Descriptive header text</span>
  <svg class="elv-accordion__icon" aria-hidden="true">...</svg>
</button>
<div class="elv-accordion__content"
     id="unique-panel-id"
     aria-hidden="true"
     role="region">
  <!-- content -->
</div>

Design System Specs