Accordion
Accordions provide a way to restrict Card components to only open one at a time.
Examples
Accordions use Card components to provide styling of the Accordion components. Use AccordionToggle to provide a button that switches between each AccordionCollapse component.
Basic Example
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>Fully Collapsed State
If you want your Accordion to start in a fully-collapsed state, then simply don't pass in a defaultActiveKey prop to Accordion.
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Click me!
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>Each of the Card components in the Accordion can have their entire header clickable, by setting the AccordionToggle's underlying component to be a CardHeader component.
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle as={Card.Header} eventKey="0">
Click me!
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="1">
Click me!
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>Custom Toggle
You can now hook into the Accordion toggle functionality via useAccordionToggle to make custom toggle components.
function CustomToggle({ children, eventKey }) {
const decoratedOnClick = useAccordionToggle(eventKey, () =>
console.log('totally custom!'),
);
return (
<button
type="button"
style={{ backgroundColor: 'pink' }}
onClick={decoratedOnClick}
>
{children}
</button>
);
}
function Example() {
return (
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<CustomToggle eventKey="0">Click me!</CustomToggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<CustomToggle eventKey="1">Click me!</CustomToggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
}
render(<Example />);Custom Toggle with Expansion Awareness
You may wish to have different styles for the toggle if it's associated section is expanded, this can be achieved with a custom toggle that is context aware and also takes advantage of the useAccordionToggle hook.
function ContextAwareToggle({ children, eventKey, callback }) {
const currentEventKey = useContext(AccordionContext);
const decoratedOnClick = useAccordionToggle(
eventKey,
() => callback && callback(eventKey),
);
const isCurrentEventKey = currentEventKey === eventKey;
return (
<button
type="button"
style={{ backgroundColor: isCurrentEventKey ? 'pink' : 'lavender' }}
onClick={decoratedOnClick}
>
{children}
</button>
);
}
function Example() {
return (
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<ContextAwareToggle eventKey="0">Click me!</ContextAwareToggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>Hello! I'm the body</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<ContextAwareToggle eventKey="1">Click me!</ContextAwareToggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>Hello! I'm another body</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
}
render(<Example />);API
Accordion
import Accordion from 'react-bootstrap/Accordion'Copy import code for the Accordion component
| Name |
Type |
Default |
Description |
| activeKey |
string |
|
The current active key that corresponds to the currently expanded card |
| as |
elementType |
|
Set a custom element for this component |
| defaultActiveKey |
string |
|
The default active key that is expanded on start |
| onSelect |
SelectCallback |
|
|
| bsPrefix |
string |
'accordion' |
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |
Accordion.Toggle
import Accordion from 'react-bootstrap/Accordion'Copy import code for the Accordion component
| Name |
Type |
Default |
Description |
| as |
elementType |
<button> |
Set a custom element for this component |
| eventKey required
|
string |
|
A key that corresponds to the collapse component that gets triggered when this has been clicked. |
| onClick |
function |
|
A callback function for when this component is clicked |
Accordion.Collapse
import Accordion from 'react-bootstrap/Accordion'Copy import code for the Accordion component
| Name |
Type |
Default |
Description |
| children required
|
element |
|
Children prop should only contain a single child, and is enforced as such |
| eventKey required
|
string |
|
A key that corresponds to the toggler that triggers this collapse's expand or collapse. |
useAccordionToggle
import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
const decoratedOnClick = useAccordionToggle(eventKey, onClick);