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# 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.
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
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) ; 