77. Accordion

Build an Accordion component in React that allows users to expand and collapse content sections.

Requirements

1. Accordion Items

• Display a list of accordion items
• Each item has a header (trigger) and content (panel)
• Clicking the header toggles the content visibility

2. Expand/Collapse Behavior

• Only one item can be open at a time (accordion mode)
• Clicking an open item closes it
• Clicking a closed item opens it and closes others
• Optional: Allow multiple items open (not required for basic version)

3. Visual States

• Show visual indicator for expanded/collapsed state (chevron, arrow, etc.)
• Active/expanded item should have distinct styling
• Smooth visual feedback on interaction

4. Data Structure

interface AccordionItem {
  id: string;
  title: string;
  content: React.ReactNode;
}

interface AccordionProps {
  items: AccordionItem[];
  allowMultiple?: boolean;
  defaultOpen?: string[];
}

Example Usage

const items = [
  { id: 'item1', title: 'Section 1', content: <div>Content 1</div> },
  { id: 'item2', title: 'Section 2', content: <div>Content 2</div> },
  { id: 'item3', title: 'Section 3', content: <div>Content 3</div> },
];

> Note: Use semantic HTML with proper ARIA attributes for accessibility.