Accordion Items

1What is an accordion component?
2When should I use accordions?
3Are accordions accessible?

Style Preset

Icon Style

Animation

Behavior

Dimensions

Typography

Colors

Preview

An accordion is a UI pattern that allows users to expand and collapse sections of content. It helps organize information and reduce visual clutter by showing only the headers until the user chooses to see more.
Accordions work well for FAQs, settings panels, navigation menus, and any situation where you have multiple sections of content that users may want to browse or compare. They're especially useful on mobile where screen space is limited.
Yes, when implemented correctly! Use proper ARIA attributes like aria-expanded, aria-controls, and roles. Ensure keyboard navigation works (Enter/Space to toggle, arrow keys to move between items).

Code Preview

HTML Markup
<div class="accordion" role="presentation">
  <div class="accordion-item">
    <button
      class="accordion-header"
      aria-expanded="false"
      aria-controls="accordion-content-1"
      id="accordion-header-1"
    >
      <span>What is an accordion component?</span>
        <svg class="accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="9 18 15 12 9 6" />
        </svg>
    </button>
    <div
      class="accordion-content"
      id="accordion-content-1"
      aria-hidden="true"
      aria-labelledby="accordion-header-1"
      role="region"
    >
      <div class="accordion-content-inner">
        An accordion is a UI pattern that allows users to expand and collapse sections of content. It helps organize information and reduce visual clutter by showing only the headers until the user chooses to see more.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header"
      aria-expanded="false"
      aria-controls="accordion-content-2"
      id="accordion-header-2"
    >
      <span>When should I use accordions?</span>
        <svg class="accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="9 18 15 12 9 6" />
        </svg>
    </button>
    <div
      class="accordion-content"
      id="accordion-content-2"
      aria-hidden="true"
      aria-labelledby="accordion-header-2"
      role="region"
    >
      <div class="accordion-content-inner">
        Accordions work well for FAQs, settings panels, navigation menus, and any situation where you have multiple sections of content that users may want to browse or compare. They're especially useful on mobile where screen space is limited.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header"
      aria-expanded="false"
      aria-controls="accordion-content-3"
      id="accordion-header-3"
    >
      <span>Are accordions accessible?</span>
        <svg class="accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="9 18 15 12 9 6" />
        </svg>
    </button>
    <div
      class="accordion-content"
      id="accordion-content-3"
      aria-hidden="true"
      aria-labelledby="accordion-header-3"
      role="region"
    >
      <div class="accordion-content-inner">
        Yes, when implemented correctly! Use proper ARIA attributes like aria-expanded, aria-controls, and roles. Ensure keyboard navigation works (Enter/Space to toggle, arrow keys to move between items).
      </div>
    </div>
  </div>
</div>

Accordion Best Practices

Accessibility

  • Use proper ARIA attributes (aria-expanded, aria-controls)
  • Ensure keyboard navigation works (Enter, Space, Arrow keys)
  • Use semantic button elements for headers
  • Provide visible focus indicators

User Experience

  • Keep accordion titles concise and descriptive
  • Consider whether to allow multiple sections open
  • Use smooth animations (300ms is a good default)
  • Provide clear visual indication of state

Performance

  • Use CSS transitions instead of JavaScript animations
  • Avoid heavy content that causes layout shifts
  • Consider lazy loading content for large accordions
  • Use max-height for smooth open/close animations

Design Guidelines

  • Maintain consistent spacing and padding
  • Use clear visual hierarchy between header and content
  • Ensure sufficient color contrast for readability
  • Keep the icon consistent across all items

Need Custom Interactive Components?

Our team can build sophisticated UI components tailored to your brand and requirements.

Contact Brix340