Description
Accordions are a common UI pattern used to organize and reveal content efficiently. They allow users to expand or collapse sections of information without overwhelming the page.
In this challenge, you’ll build a fully functional Accordion component — a simple but essential interaction found across dashboards, FAQs, and mobile apps.
Your goal is to create a clean, reusable Accordion that behaves predictably and provides a smooth user experience.
Requirements
- The accordion should have multiple sections — for example:
- Title 1 → “Content 1”
- Title 2 → “Content 2”
- Title 3 → “Content 3”
- On initial render, all sections should be collapsed (content hidden).
- When a title is clicked, it should:
- Toggle visibility of its associated content.
- Not affect the state of other sections.
- Clicking the same title again should collapse its content.
- The accordion should include:
- A smooth open/close transition (e.g., height or transform-based).
- Keyboard accessibility — users can toggle sections using the Enter or Space key when the title is focused.
- The implementation should be reusable — capable of rendering any number of accordion sections dynamically.
Example Behavior
Action | Expected Result |
|---|---|
Page loads | All content hidden |
Click “Title 1” | “Content 1” becomes visible |
Click “Title 2” | “Content 2” becomes visible; “Content 1” stays open |
Click “Title 1” again | “Content 1” collapses |
Press | Toggles its content |
Example UI (for reference)
Example Input
const data = [
{ title: "What is React?", content: "React is a JavaScript library for building UIs." },
{ title: "Why use React?", content: "Because it makes UI predictable and component-based." },
];
Example Output (Rendered)
- Clicking “What is React?” shows its answer.
- Clicking again hides it.
- “Why use React?” can be opened or closed independently.
Hints
- You’ll need a way to track which sections are open.
- Aim for clean, reusable code — as if this accordion will be part of a UI library