30 lines
830 B
JavaScript
30 lines
830 B
JavaScript
// Accordion.js
|
|
import React from 'react';
|
|
|
|
const AccordionItem = ({ id, title, content, isActive, onToggle }) => (
|
|
<div className={`card accordion-item ${isActive ? 'active' : ''}`}>
|
|
<h2 className="accordion-header" id={`heading${id}`}>
|
|
<button
|
|
type="button"
|
|
className="accordion-button"
|
|
data-bs-toggle="collapse"
|
|
aria-label='Click me'
|
|
data-bs-target={`#accordion${id}`}
|
|
aria-expanded={isActive ? 'true' : 'false'}
|
|
aria-controls={`accordion${id}`}
|
|
onClick={() => onToggle(id)}
|
|
>
|
|
{title}
|
|
</button>
|
|
</h2>
|
|
<div
|
|
id={`accordion${id}`}
|
|
className={`accordion-collapse collapse ${isActive ? 'show' : ''}`}
|
|
>
|
|
<div className="accordion-body">{content}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default AccordionItem;
|