Problem

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:

From this many Accordions are being generated. I want the 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

Suggested blogs:

>How to conditionally render different arrays in React?

>Fix react useState and array.map not work issue

>Making infinite scrolling using react-query

>How does React State with JSON arrays affect performance?

>setlist{nosep} not work in the acronym package

>Fix ScrollIntoView not working issue

>Testing react component with jest

>How you can Show or hide elements in React?

>Testing react components using Hooks and Mocks

>Tips for using React Redux Hooks to show or hide React components