The Accordion is highly customizable and has few styles from the start.
const accordionItems = [
"Invite team members",
"Make a first payment",
"Order physical cards",
];
const Demo = () => {
return (
<Accordion>
{accordionItems.map((accordionItem) => (
<AccordionItem
key={accordionItem}
renderHeader={() => <div>{accordionItem}</div>}
>
<div className="p-24 pt-8 text-content-primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec
lectus sed sem porttitor viverra. Vestibulum magna leo.
</div>
</AccordionItem>
))}
</Accordion>
);
};
The open prop lets you select which item should be expanded.
In an Accordion group, only one AccordionItem can be expanded at a time. If multiple AccordionItem components have the open prop set to true, the last one will be the one that is open.
If you need to have multiple AccordionItem components open at the same time, you should use the AccordionItem components directly without wrapping them in an Accordion component.
<Accordion className="w-full text-content-primary">
<AccordionItem
open
renderHeader={() => "Invite team members"}
>
<div className="p-24 pt-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus
sed sem porttitor viverra. Vestibulum magna leo.
</div>
</AccordionItem>
<AccordionItem renderHeader={() => "Make a first payment"}>
<div className="p-24 pt-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec lectus
sed sem porttitor viverra. Vestibulum magna leo.
</div>
</AccordionItem>
</Accordion>
To control an AccordionItem, use the useState hook and set the open prop to the desired state.
function Demo() {
const [indexOpen, setIndexOpen] = useState("close");
return (
<>
<Button
variant="primaryBrand"
text="Open accordion"
onClick={() => setIndexOpen("open")}
/>
<Button
variant="primaryBrand"
text="Close accordion"
onClick={() => setIndexOpen("close")}
/>
<Accordion className="w-full overflow-hidden">
<AccordionItem
open={"open" === indexOpen}
renderHeader={() => "Invite team members"}
>
<div className="p-24 pt-8 text-content-primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec
lectus sed sem porttitor viverra. Vestibulum magna leo.
</div>
</AccordionItem>
</Accordion>
</>
);
}
The onToggle prop lets you get the state of an AccordionItem component.
const Demo = () => {
const [openItem, setOpenItem] = useState(false);
return (
<AccordionItem
className="w-full"
open={openItem}
onToggle={(open) => setOpenItem(open)}
renderHeader={() => (openItem ? "Show less" : "Show more")}
>
<div className="p-24 pt-8 text-content-primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec
lectus sed sem porttitor viverra. Vestibulum magna leo.
</div>
</AccordionItem>
);
};