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