## Zusammenziehbares Akkordeon > In der VM wurden bereits `index.html` und `script.js` bereitgestellt. Im Allgemeinen müssen Sie nur Code in `script.js` und `style.css` hinzufügen. Um ein Akkordeon-Menü mit mehreren zusammenziehbaren Inhaltelementen zu rendern, können Sie die folgenden Schritte ausführen: 1. Definieren Sie einen `AccordionItem`-Komponenten, der einen `

{children}

); }; const Accordion = ({ defaultIndex, onItemClick, children }) => { const [bindIndex, setBindIndex] = React.useState(defaultIndex); const changeItem = (itemIndex) => { if (typeof onItemClick === "function") onItemClick(itemIndex); if (itemIndex !== bindIndex) setBindIndex(itemIndex); }; const items = children.filter((item) => item.type.name === "AccordionItem"); return ( <> {items.map(({ props }) => ( changeItem(props.index)} children={props.children} /> ))} ); }; ``` ```jsx ReactDOM.createRoot(document.getElementById("root")).render( Lorem ipsum Dolor sit amet ); ``` Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte **Web 8080** aktualisieren, um die Webseite zu previewen.