Accordion
Accordions provide a way to restrict Card components to only open one at a time. — react-bootstrap
There are multiple ways to use Accordions which corresponds to the cards, below are the examples of using Accordions to handle show/hide of the cards and their data.
First example below shows one card as active and clickable.
<Accordion defaultActiveKey="0" style={AccordionStyle}><Card><Card.Header><Accordion.Toggle as={Button} variant="link" eventKey="0">Click Me and expand the card!!</Accordion.Toggle></Card.Header><Accordion.Collapse eventKey="0"><Card.Body style={{ color: 'black' }}>Hello! I'm the body of card</Card.Body></Accordion.Collapse></Card>
</Accordion>
Here I also used inline styles with the bootstrap component, this can be accomplished using style attribute in the components.
The defaultActiveKey attribute can be anything declared as a string value, by which we can set the any card to opened at the beginning, it starts with default value as “0” which corresponds to first card and increases by “1” for second card and so on.
Accordions Entire Card Clickable:
We can make Accordions entire card to be clickable by not having the variant property on Accordion.Toggle Card.
Below example code shows the Entire Card Clickable state with Accordion
<Accordion defaultActiveKey="0" style={AccordionStyle}><Card style={{color: 'blue'}}><Accordion.Toggle as={Card.Header} eventKey="0">Click me to expand the card!!</Accordion.Toggle><Accordion.Collapse eventKey="0"><Card.Body>Hello! I'm the body</Card.Body></Accordion.Collapse></Card><Card style={{color: 'blue'}}><Accordion.Toggle as={Card.Header} eventKey="1">Click me and expand the card!!</Accordion.Toggle><Accordion.Collapse eventKey="1"><Card.Body>Hello! I'm another body</Card.Body></Accordion.Collapse></Card></Accordion>
Fully collapsed state for Accordions:
Accordions can be used with fully collapsed state without having defaultActiveKey property.
