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
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
.
Entire Header Clickable
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.
Custom Toggle
You can now hook into the Accordion toggle functionality via useAccordionToggle
to make custom toggle components.
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.
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);
© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/accordion/