Search code examples
reactjstypescriptreact-bootstrap

Collapse Accordions in React

Using the <Accordion> - Tag in react implicitly generates bootstrap-elements from which I don't know how to access them.

The structure is the following:

return (
<Card>
<Accordion>
<Accordion.Item eventKey={uniqueAccordionItemKey}>
<Accordion.Header>
</Accordion.Header>
<Accordion.Body>
</Accordion.Body>
</Accordion.Item>
</Accordion>
</Card>
);

From this many Accordions are being generated. I want a possibility to collapse all of them. How do I do so?

I tried to manipulate the css-attributes using show and collapse as attributes but this turned out just hiding the content and not collapsing the Accordion. Also manipulating the aria-expanded attribute inside the Accordion.Item did not work.

Solution

  • Have a look at https://react-bootstrap.netlify.app/docs/components/accordion/#accordion

    You can control the accordion items using the activeKey prop on the Accordion in combination with the eventKey on the Accordion.Item