Accordion Section

Data Structure

For our examples, FAQ data files are stored in lib/data/ as JSON files. Each FAQ file should have the following structure:

Basic FAQ structure:

{
  "id": "unique-id",
  "title": "Your question here?",
  "answer": "Your detailed answer here."
}

Fancy FAQ with background image:

{
  "id": "unique-id",
  "title": "Your question here?",
  "answer": "Your detailed answer here.",
  "isFancy": true,
  "background": {
    "image": "/assets/images/sample9.jpg"
  }
}

Fancy FAQ with background color:

{
  "id": "unique-id",
  "title": "Your question here?",
  "answer": "Your detailed answer here.",
  "isFancy": true,
  "background": {
    "color": "#3498db"
  }
}

JavaScript Functionality

The accordion uses requestAnimationFrame for animations rather than CSS transitions. This approach enables simultaneous animation of multiple panels, which is essential for smooth visual transitions when one panel closes while another opens (in single-panel mode) or when using the "toggle all" functionality.

CSS transitions would schedule these animations sequentially, resulting in janky, staggered motion. By using requestAnimationFrame with a batched animations array, all height changes occur frame-perfect synchronized, creating a polished user experience.

The JavaScript handles:

• Simultaneous expand/collapse animations for multiple panels
• Click events on accordion headers
• Managing ARIA attributes for accessibility (aria-expanded)
• Screen reader announcements when panels open/close
• Single or multiple item expansion based on configuration
• Initial state management (expand specific item if configured)
• Full keyboard navigation (Arrow keys, Home, End, Enter, Space)
• Toggle all functionality with dynamic button text updates

Styling

The component includes responsive styles with:

• Height manipulation via JavaScript for smooth synchronized animations
• Custom easing function (cubic bezier) for natural motion
• Hover and focus states for accessibility
• Customizable through CSS variables