Basic Accordion

쉬움

기본 확장 가능한 아코디언

#click#javascript#accordion

라이브 데모

React is a JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called components.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML.

코드

BasicAccordion.tsx

const [openIndex, setOpenIndex] = useState(0);
const toggleItem = (index) => setOpenIndex(openIndex === index ? null : index);
return (
  <div className={`accordion-item ${openIndex === index ? 'open' : ''}`}>
    <button onClick={() => toggleItem(index)}>Title</button>
    <div className="accordion-content">Content</div>
  </div>
);