Nested Accordion

어려움

중첩된 아코디언 패널

#click#javascript#accordion#nested

라이브 데모

A JavaScript library for building user interfaces

The Progressive JavaScript Framework

Platform for building mobile and desktop web applications

JavaScript runtime built on Chrome's V8 JavaScript engine

High-level programming language for general-purpose programming

Class-based, object-oriented programming language

코드

NestedAccordion.tsx

const [openParent, setOpenParent] = useState(0);
const [openChild, setOpenChild] = useState(null);
return (
  <div className="nested-accordion">
    <div className="nested-accordion-parent">
      <button onClick={() => setOpenParent(index)}>Parent</button>
      <div className="nested-accordion-parent-content">
        {children.map(child => (
          <div className="nested-accordion-child">...</div>
        ))}
      </div>
    </div>
  </div>
);