FAQ Section

An interactive FAQ section component with accordion functionality, perfect for documentation sites, support pages, and product information. Features smooth animations, keyboard accessibility, and clean individual accordion items.

Features

• Interactive Accordion: Smooth expand/collapse animations with individual accordion items
• Visual Variants: Default, bordered, and minimal styles
• Keyboard Accessible: Full keyboard navigation support
• Responsive Design: Adapts to all screen sizes
• Flexible Content: Each accordion can contain rich content through AccordionContent
• Independent Items: Each FAQ creates its own accordion component

Basic Usage

import FAQSection from "@/components/block/FAQSection.astro"

const faqs = [
  {
    question: "How do I get started?",
    answer: "Getting started is easy! Simply follow our installation guide and you'll be up and running in minutes."
  },
  {
    question: "Is it free to use?",
    answer: "Yes, our basic plan is completely free and includes all essential features for small projects."
  }
];

<FAQSection
  title="Frequently Asked Questions"
  tagline="Need help?"
  description="Find answers to common questions about our platform."
  faqs={faqs}
/>

Examples

Default FAQ Section

Bordered Variant

Minimal Variant

Props

FAQItem Interface

interface FAQItem {
  question: string;  // The question text (required)
  answer: string;    // The answer text (required)
  id?: string;       // Optional unique identifier
}

Visual Variants

Default Variant

Clean card-based design with subtle shadows and borders:

<FAQSection variant="default" faqs={faqs} />

Bordered Variant

Minimal design with borders but no background fill:

<FAQSection variant="bordered" faqs={faqs} />

Minimal Variant

Ultra-clean design with just bottom borders:

<FAQSection variant="minimal" faqs={faqs} />

Individual Accordion Behavior

Each FAQ item creates its own independent accordion component with the following features:

• Individual Control: Each accordion operates independently
• Smooth Animations: Built-in expand/collapse animations
• Keyboard Accessible: Full keyboard navigation support
• Unique IDs: Optional custom IDs for each FAQ item

const faqs = [
  {
    question: "How do I get started?",
    answer: "Follow our quick start guide...",
    id: "getting-started" // Optional custom ID
  }
];

<FAQSection faqs={faqs} />

Underlying Accordion Components

The FAQSection uses the updated Accordion architecture:

• Accordion Component: Each FAQ creates an individual <Accordion> with a required label prop
• AccordionContent Component: Each answer is wrapped in <AccordionContent> for proper styling
• Independent Operation: Each accordion operates separately (no global state management)

Direct Accordion Usage

You can also use the Accordion components directly for more control:

import Accordion from "@/components/block/Accordion.astro"
import AccordionContent from "@/components/block/AccordionContent.astro"

<Accordion label="Custom Question" variant="bordered">
  <AccordionContent>
    <p>Your custom answer with <strong>rich formatting</strong>.</p>
    <ul>
      <li>Lists are supported</li>
      <li>Links work too: <a href="/docs-site-kickstarter/docs">Documentation</a></li>
    </ul>
  </AccordionContent>
</Accordion>

Accordion Props

Custom Content

Use the slot to add additional content like contact information or CTAs:

<FAQSection title="Common Questions" faqs={faqs}>
  <div class="faq-contact">
    <h3>Need more help?</h3>
    <p>Our support team is available 24/7 to assist you.</p>
    <a href="/docs-site-kickstarter/support" class="faq-contact-button">
      Get Support
    </a>
  </div>
</FAQSection>

Accessibility Features

• Keyboard Navigation: Full keyboard support with Tab and Enter keys
• ARIA Attributes: Proper aria-expanded and aria-controls attributes
• Screen Reader Support: Semantic HTML structure for assistive technologies
• Focus Management: Clear focus indicators and logical tab order

Interactive Behavior

Each individual accordion includes built-in JavaScript for:

• Smooth Animations: Expand/collapse transitions with proper height calculations
• Keyboard Navigation: Full keyboard support with Tab and Enter keys
• Independent State: Each accordion manages its own open/closed state
• Hover Effects: Visual feedback on hover and focus states
• Accessibility: Proper ARIA attributes and screen reader support

Responsive Design

• Desktop: Full layout with optimal spacing and typography
• Tablet: Adjusted spacing and font sizes for medium screens
• Mobile: Optimized padding and touch-friendly interactions
• Touch Friendly: Larger touch targets and proper spacing for mobile devices

Styling Customization

CSS Custom Properties

.faq-section {
  --faq-border-radius: 0.75rem;
  --faq-padding: 1.5rem;
  --faq-gap: 1rem;
  --faq-transition: 0.3s ease;
}

Custom Styling

<FAQSection 
  className="custom-faq"
  faqs={faqs}
>
  <style>
    .custom-faq .faq-question {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
  </style>
</FAQSection>

Best Practices

1. Question Writing: Use clear, specific questions that users actually ask
2. Answer Length: Keep answers concise but complete (2-4 sentences ideal)
3. Organization: Group related questions together
4. Search Integration: Consider adding search functionality for many FAQs
5. Regular Updates: Keep content current and add new questions based on user feedback

Common Use Cases

• Product Documentation: Feature explanations and troubleshooting
• Support Pages: Customer service and technical support
• Onboarding: New user questions and getting started guides
• Pricing Pages: Billing, plans, and feature questions
• Legal Pages: Terms, privacy, and compliance questions

Integration with Search

For sites with many FAQs, consider adding search functionality:

<!-- Add search before FAQ section -->
<div class="faq-search">
  <input type="search" placeholder="Search FAQs..." />
</div>

<FAQSection faqs={filteredFaqs} />

Analytics and Optimization

Track which questions are most frequently opened to:

• Identify common user pain points
• Optimize question ordering
• Create additional documentation for popular topics
• Improve product features based on common questions

Content Management

Static Content

const faqs = [
  { question: "...", answer: "..." },
  // ... more FAQs
];

Dynamic Content

// Fetch from CMS or API
const faqs = await fetch('/api/faqs').then(res => res.json());

Markdown Support

const faqs = [
  {
    question: "How do I format code?",
    answer: "Use backticks for `inline code` or triple backticks for code blocks."
  }
];