Accordion Component

Question

Expand/collapse sections by clicking headers.

Accepted Answer

import './index.css'; import React, { useState } from 'react'; const sections = [ { title: 'Section 1', content: 'Content 1' }, { title: 'Section 2', content: 'Content 2' }, { title: 'Section 3', content: 'Content 3' }, ]; function App() { const [open, setOpen] = useState(null); return (

Accordion

{sections.map((section, idx) => (

{open === idx && (

{section.content}

)}

))}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background: #f5f5f5; } * { box-sizing: border-box; } .accordion-container { max-width: 400px; margin: 40px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 24px; } .accordion-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .accordion-section + .accordion-section { margin-top: 1rem; } .accordion-header { width: 100%; text-align: left; background: #e0e7ef; border: none; border-radius: 8px; padding: 0.75rem 1rem; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background 0.2s; } .accordion-header.open, .accordion-header:hover { background: #c7d2fe; } .accordion-content { background: #f1f5f9; border-radius: 0 0 8px 8px; padding: 1rem; margin-top: 0.5rem; color: #334155; font-size: 1rem; }