Accordion

    Build vertically collapsing accordions in combination with the Collapse component.

    Examples

    Click the accordions below to expand/collapse the accordion content.

    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.

    Flush

    Add flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

    Custom Accordions

    You can still create card-based accordions like those in Bootstrap 4. You can hook into the Accordion toggle functionality via useAccordionButton to make custom toggle components.

    Custom Toggle

    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 useAccordionButton hook.

    API

    import Accordion from 'react-bootstrap/Accordion'Copy import code for the Accordion component
    NameTypeDefaultDescription
    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

    flush
    boolean

    Renders accordion edge-to-edge with its parent container

    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.Itemview source file

    import Accordion from 'react-bootstrap/Accordion'Copy import code for the Accordion component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    Set a custom element for this component

    eventKey required
    string

    A unique key used to control this item's collapse/expand.

    bsPrefix
    string
    'accordion-item'

    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.Headerview source file

    import Accordion from 'react-bootstrap/Accordion'Copy import code for the Accordion component
    NameTypeDefaultDescription
    as
    elementType
    <h2>

    Set a custom element for this component

    onClick
    function

    Click handler for the AccordionButton element

    bsPrefix
    string
    'accordion-header'

    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.Bodyview source file

    import Accordion from 'react-bootstrap/Accordion'Copy import code for the Accordion component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    Set a custom element for this component

    bsPrefix
    string
    'accordion-body'

    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.Buttonview source file

    import Accordion from 'react-bootstrap/Accordion'Copy import code for the Accordion component
    NameTypeDefaultDescription
    as
    elementType
    <button>

    Set a custom element for this component

    onClick
    function

    A callback function for when this component is clicked

    bsPrefix
    string
    'accordion-button'

    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.Collapseview source file

    import Accordion from 'react-bootstrap/Accordion'Copy import code for the Accordion component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    Set a custom element for this component

    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.

    useAccordionButton

    import { useAccordionButton } from 'react-bootstrap/AccordionButton';
    
    const decoratedOnClick = useAccordionButton(eventKey, onClick);