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

    Hello! I'm the body
    Hello! I'm another body

    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.

    Hello! I'm the body
    Hello! I'm another body

    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.

    Click me!
    Hello! I'm the body
    Click me!
    Hello! I'm another body

    Custom Toggle

    You can now hook into the Accordion toggle functionality via useAccordionToggle to make custom toggle components.

    Hello! I'm the body
    Hello! I'm another body

    API

    Accordionview source file

    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

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

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

    Set a custom element for this component

    children
    element

    Children prop should only contain a single child, and is enforced as such

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

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