Accordion Component

This example shows how to create a simple accordion component.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Accordion() {
  const [openIndex, setOpenIndex] = useState(null);
  
  const toggleAccordion = (index) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  const items = [
    { title: 'Section 1', content: 'Content for section 1.' },
    { title: 'Section 2', content: 'Content for section 2.' },
    { title: 'Section 3', content: 'Content for section 3.' },
  ];

  return (
    <div>
      <h1>Accordion Example</h1>
      {items.map((item, index) => (
        <div key={index}>
          <button onClick={() => toggleAccordion(index)}>
            {item.title}
          </button>
          {openIndex === index && <p>{item.content}</p>}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<Accordion />, document.getElementById('root'));