FAQAccordion

The FAQAccordion component displays frequently asked questions in an interactive, collapsible accordion format.

Overview

• Type: Content Component
• Category: Interactive Content
• Complexity: Moderate
• File: src/components/FAQAccordion.astro

Features

• Collapsible Sections - Click to expand/collapse answers
• Category Filtering - Show FAQs by category
• Configuration-Driven - Content from faqData.ts
• SEO-Friendly - Proper heading structure
• Keyboard Accessible - Full keyboard navigation support
• Smooth Animations - Transitions when expanding/collapsing

Props

interface Props {
  faqs?: FAQItem[];
  category?: string;
}

Prop Details

Prop	Type	Default	Description
faqs	FAQItem[]	All FAQs from config	Array of FAQ items to display
category	string	undefined	Filter FAQs by category

FAQ Item Interface

interface FAQItem {
  question: string;
  answer: string;
  category?: string;
}

Usage

All FAQs

---
import FAQAccordion from '@/components/FAQAccordion.astro';
---

<FAQAccordion />

By Category

---
import FAQAccordion from '@/components/FAQAccordion.astro';
---

<!-- Show only membership FAQs -->
<FAQAccordion category="membership" />

Custom FAQs

---
import FAQAccordion from '@/components/FAQAccordion.astro';

const customFaqs = [
  {
    question: 'How do I become a member?',
    answer: 'Visit our membership page and fill out the application form.',
    category: 'membership',
  },
  {
    question: 'What are the benefits?',
    answer: 'Members receive access to networking events, professional development, and more.',
    category: 'membership',
  },
];
---

<FAQAccordion faqs={customFaqs} />

FAQ Configuration File

FAQs are defined in src/data/faqData.ts:

src/data/faqData.ts

export interface FAQItem {
  question: string;
  answer: string;
  category?: string;
}

export const faqData: FAQItem[] = [
  {
    question: 'What is FiNAN?',
    answer: 'FiNAN (Filipino Nurses Association in the Nordic Region) is a non-profit organization connecting Filipino nurses across the Nordic countries.',
    category: 'general',
  },
  {
    question: 'How can I join FiNAN?',
    answer: 'Visit our membership page and complete the online application form. Membership is open to all Filipino nurses working in the Nordic region.',
    category: 'membership',
  },
  // ... more FAQs
];

For Editors

To add or update FAQs, edit src/data/faqData.ts. This is one of the most common content updates editors make.

Adding FAQs

1. Open the FAQ data file

   Navigate to: src/data/faqData.ts

2. Add a new FAQ object

   {
     question: 'Your question here?',
     answer: 'Your detailed answer here.',
     category: 'general', // or 'membership', 'events', etc.
   },

3. Choose a category (optional but recommended)

   Common categories:

   • general - About FiNAN
   • membership - Joining and member benefits
   • events - Event-related questions
   • contact - How to reach us

4. Build and test

   pnpm build

5. Verify on FAQ page

   Check that your FAQ appears at /faq

Interactive Behavior

Client-Side Script

The accordion uses JavaScript for interactivity:

<script is:inline src="/js/faq-accordion.js" defer></script>

Features:

• Click to toggle - Open/close individual items
• Auto-close others - Optional: close other items when opening one
• Smooth transitions - CSS transitions for expand/collapse
• ARIA attributes - Proper aria-expanded states

Styling States

/* Closed state */
.faq-item { }

/* Open state */
.faq-item.active {
  /* Answer visible */
}

/* Icon rotation */
.faq-icon {
  transition: transform 0.3s;
}
.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

Styling

Layout

• Container: Max-width with padding
• Items: Stacked vertically with borders
• Spacing: Consistent gaps between items

Typography

• Question: Bold, larger text (lg or xl)
• Answer: Regular weight, comfortable line height
• Color: Dark text on white background

Interactive Elements

• Hover State: Subtle background color change
• Focus State: Visible outline for keyboard users
• Icon: Chevron or plus/minus that rotates when open

Categories

Organize FAQs by category for better user experience:

Common Categories

1. General - About the organization
2. Membership - How to join, benefits, fees
3. Events - Event information, registration
4. Contact - How to reach representatives
5. Resources - Guides, documents, links

Using Categories

Display category-specific FAQs on different pages:

<!-- On membership page -->
<FAQAccordion category="membership" />

<!-- On events page -->
<FAQAccordion category="events" />

<!-- On general FAQ page (all categories) -->
<FAQAccordion />

Accessibility

• Keyboard Navigation: Tab through questions, Enter/Space to toggle
• ARIA Labels:
  • aria-expanded="true|false" on buttons
  • aria-controls linking button to content
• Semantic HTML:
  • <h3> or <h4> for questions
  • <button> for interactive triggers
• Focus Management: Visible focus indicators

SEO Benefits

Structured Data

Combine with the StructuredData component for rich snippets:

---
import FAQAccordion from '@/components/FAQAccordion.astro';
import StructuredData from '@/components/StructuredData.astro';
import { faqData } from '@/data/faqData';
---

<!-- FAQ Page with structured data -->
<StructuredData type="FAQPage" data={faqData} />
<FAQAccordion />

This creates FAQ rich snippets in Google search results.

Content Benefits

• Answers user questions directly
• Reduces support inquiries
• Improves search rankings for question keywords
• Increases time on page

Common Modifications

Changing Default Behavior

Keep all items closed by default:

// In faq-accordion.js
const defaultOpen = false; // Change from true

Allow multiple items open:

// In faq-accordion.js
const allowMultiple = true; // Change from false

Customizing Appearance

Change icon:

<!-- Replace chevron with plus/minus -->
<svg class="faq-icon">
  <path d="M12 5v14M5 12h14" /> <!-- Plus icon -->
</svg>

Add answer formatting:

<div class="faq-answer" set:html={faq.answer} />

This allows HTML in answers (use carefully).

Best Practices

✅ Do:

• Keep questions concise (one sentence)
• Provide complete, helpful answers (2-4 sentences)
• Use categories to organize related questions
• Update FAQs based on common user questions
• Include links in answers when relevant

❌ Don’t:

• Create overly long answers (consider a dedicated page instead)
• Use technical jargon without explanation
• Duplicate information across multiple FAQs
• Leave outdated information

Note

Review and update FAQs regularly based on actual questions you receive from users and members.

Common Issues

FAQ Not Showing

Cause: Typo in category name

Solution: Verify category matches exactly:

<FAQAccordion category="membership" /> // Must match data exactly

Accordion Not Working

Cause: JavaScript file not loading

Solution: Check that /js/faq-accordion.js exists and loads properly

Build Errors

Cause: Invalid JSON in faqData.ts

Solution: Ensure proper TypeScript syntax with commas and quotes

Performance

• Lazy Script Loading: Uses defer attribute
• No Heavy Dependencies: Pure JavaScript
• CSS Animations: Hardware-accelerated transforms
• Static Content: FAQ content is static, loads fast

Dependencies

• faqData.ts - FAQ content configuration
• public/js/faq-accordion.js - Interactive functionality

Used On

• FAQ Page (/faq) - Primary usage
• Membership Page - Membership-specific FAQs
• Event Pages - Event-specific questions

Related Components

• StructuredData - SEO markup for FAQs

Related Documentation

• FAQ Management Guide Essential for editors
• Data Configuration - Config file patterns

Source Code

View the complete implementation:

https://github.com/poncardasm/finan-website/blob/main/src/components/FAQAccordion.astro
https://github.com/poncardasm/finan-website/blob/main/src/data/faqData.ts
https://github.com/poncardasm/finan-website/blob/main/public/js/faq-accordion.js

Editor-Friendly Component

FAQAccordion is one of the most editor-friendly components. Non-technical users can easily add/update FAQs by editing the data file without touching component code.